<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>CSS Display Module Level 3</title>
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <meta content="refining" name="csswg-work-status">
  <meta content="ED" name="w3c-status">
  <meta content="This module describes how the CSS formatting box tree is generated from the document element tree and defines the &apos;display&apos; property that controls it." name="abstract">
  <link href="../default.css" rel="stylesheet" type="text/css">
  <link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon">
<style>
  body {
    background: url("https://www.w3.org/StyleSheets/TR/logo-ED") top left no-repeat;
  }
  </style>
  <link href="https://www.w3.org/TR/css-display-3/" rel="canonical">
<script defer src="https://test.csswg.org/harness/annotate.js#!css-display-3_dev/css-display-3" type="text/javascript"></script>
<style>
		#display-value-summary td,
		#display-value-summary th { text-align: left; }
	</style>
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
<style>/* style-dfn-panel */

.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: #DDDDDD;
    color: black;
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
<style>/* style-syntax-highlighting */

.highlight:not(.idl) { background: hsl(24, 20%, 95%); }
code.highlight { padding: .1em; border-radius: .3em; }
pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; }
c-[a] { color: #990055 } /* Keyword.Declaration */
c-[b] { color: #990055 } /* Keyword.Type */
c-[c] { color: #708090 } /* Comment */
c-[d] { color: #708090 } /* Comment.Multiline */
c-[e] { color: #0077aa } /* Name.Attribute */
c-[f] { color: #669900 } /* Name.Tag */
c-[g] { color: #222222 } /* Name.Variable */
c-[k] { color: #990055 } /* Keyword */
c-[l] { color: #000000 } /* Literal */
c-[m] { color: #000000 } /* Literal.Number */
c-[n] { color: #0077aa } /* Name */
c-[o] { color: #999999 } /* Operator */
c-[p] { color: #999999 } /* Punctuation */
c-[s] { color: #a67f59 } /* Literal.String */
c-[t] { color: #a67f59 } /* Literal.String.Single */
c-[u] { color: #a67f59 } /* Literal.String.Double */
c-[cp] { color: #708090 } /* Comment.Preproc */
c-[c1] { color: #708090 } /* Comment.Single */
c-[cs] { color: #708090 } /* Comment.Special */
c-[kc] { color: #990055 } /* Keyword.Constant */
c-[kn] { color: #990055 } /* Keyword.Namespace */
c-[kp] { color: #990055 } /* Keyword.Pseudo */
c-[kr] { color: #990055 } /* Keyword.Reserved */
c-[ld] { color: #000000 } /* Literal.Date */
c-[nc] { color: #0077aa } /* Name.Class */
c-[no] { color: #0077aa } /* Name.Constant */
c-[nd] { color: #0077aa } /* Name.Decorator */
c-[ni] { color: #0077aa } /* Name.Entity */
c-[ne] { color: #0077aa } /* Name.Exception */
c-[nf] { color: #0077aa } /* Name.Function */
c-[nl] { color: #0077aa } /* Name.Label */
c-[nn] { color: #0077aa } /* Name.Namespace */
c-[py] { color: #0077aa } /* Name.Property */
c-[ow] { color: #999999 } /* Operator.Word */
c-[mb] { color: #000000 } /* Literal.Number.Bin */
c-[mf] { color: #000000 } /* Literal.Number.Float */
c-[mh] { color: #000000 } /* Literal.Number.Hex */
c-[mi] { color: #000000 } /* Literal.Number.Integer */
c-[mo] { color: #000000 } /* Literal.Number.Oct */
c-[sb] { color: #a67f59 } /* Literal.String.Backtick */
c-[sc] { color: #a67f59 } /* Literal.String.Char */
c-[sd] { color: #a67f59 } /* Literal.String.Doc */
c-[se] { color: #a67f59 } /* Literal.String.Escape */
c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */
c-[si] { color: #a67f59 } /* Literal.String.Interpol */
c-[sx] { color: #a67f59 } /* Literal.String.Other */
c-[sr] { color: #a67f59 } /* Literal.String.Regex */
c-[ss] { color: #a67f59 } /* Literal.String.Symbol */
c-[vc] { color: #0077aa } /* Name.Variable.Class */
c-[vg] { color: #0077aa } /* Name.Variable.Global */
c-[vi] { color: #0077aa } /* Name.Variable.Instance */
c-[il] { color: #000000 } /* Literal.Number.Integer.Long */
</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"><a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" width="72"> </a> </p>
   <h1 class="p-name no-ref" id="title">CSS Display Module Level 3</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   <details>
    <summary>Specification Metadata</summary>
    <div data-fill-with="spec-metadata">
     <dl>
      <dt>This version:
      <dd><a class="u-url" href="https://drafts.csswg.org/css-display/">https://drafts.csswg.org/css-display/</a>
      <dt>Latest published version:
      <dd><a href="https://www.w3.org/TR/css-display-3/">https://www.w3.org/TR/css-display-3/</a>
      <dt>Previous Versions:
      <dd><a href="https://www.w3.org/TR/2019/CR-css-display-3-20190711/" rel="prev">https://www.w3.org/TR/2019/CR-css-display-3-20190711/</a>
      <dd><a href="https://www.w3.org/TR/2018/CR-css-display-3-20180828/" rel="prev">https://www.w3.org/TR/2018/CR-css-display-3-20180828/</a>
      <dd><a href="https://www.w3.org/TR/2018/WD-css-display-3-20180809/" rel="prev">https://www.w3.org/TR/2018/WD-css-display-3-20180809/</a>
      <dd><a href="https://www.w3.org/TR/2018/WD-css-display-3-20180420/" rel="prev">https://www.w3.org/TR/2018/WD-css-display-3-20180420/</a>
      <dd><a href="https://www.w3.org/TR/2017/WD-css-display-3-20170720/" rel="prev">https://www.w3.org/TR/2017/WD-css-display-3-20170720/</a>
      <dd><a href="https://www.w3.org/TR/2017/WD-css-display-3-20170126/" rel="prev">https://www.w3.org/TR/2017/WD-css-display-3-20170126/</a>
      <dd><a href="https://www.w3.org/TR/2015/WD-css-display-3-20151015/" rel="prev">https://www.w3.org/TR/2015/WD-css-display-3-20151015/</a>
      <dd><a href="https://www.w3.org/TR/2015/WD-css-display-3-20150721/" rel="prev">https://www.w3.org/TR/2015/WD-css-display-3-20150721/</a>
      <dd><a href="https://www.w3.org/TR/2014/WD-css-display-3-20140911/" rel="prev">https://www.w3.org/TR/2014/WD-css-display-3-20140911/</a>
      <dt>Test Suite:
      <dd><a href="http://test.csswg.org/suites/css-display-3_dev/nightly-unstable/">http://test.csswg.org/suites/css-display-3_dev/nightly-unstable/</a>
      <dt class="editor">Editors:
      <dd class="editor p-author h-card vcard" data-editor-id="42199"><a class="p-name fn u-url url" href="http://xanthir.com/contact/">Tab Atkins Jr.</a> (<span class="p-org org">Google</span>)
      <dd class="editor p-author h-card vcard" data-editor-id="35400"><a class="p-name fn u-url url" href="http://fantasai.inkedblade.net/contact">Elika J. Etemad / fantasai</a> (<span class="p-org org">Invited Expert</span>)
      <dt>Suggest an Edit for this Spec:
      <dd><a href="https://github.com/w3c/csswg-drafts/blob/master/css-display-3/Overview.bs">GitHub Editor</a>
      <dt>Issue Tracking:
      <dd><a href="https://github.com/w3c/csswg-drafts/labels/css-display-3">GitHub Issues</a>
     </dl>
    </div>
   </details>
   <div data-fill-with="warning"></div>
   <p class="copyright" data-fill-with="copyright"><a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 1970 <a href="https://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="https://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="https://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="https://www.keio.ac.jp/">Keio</a>, <a href="https://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document">permissive document license</a> rules apply. </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>This module describes how the CSS formatting box tree is generated from the document element tree and defines the <a class="property" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display">display</a> property that controls it.</p>
    <a href="https://www.w3.org/TR/CSS/">CSS</a> is a language for describing the rendering of structured documents
(such as HTML and XML)
on screen, on paper, etc. 
  </div>
  <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2>
  <div data-fill-with="status">
   <p> This is a public copy of the editors’ draft.
	It is provided for discussion only and may change at any moment.
	Its publication here does not imply endorsement of its contents by W3C.
	Don’t cite this document other than as work in progress. </p>
   <p> <a href="https://github.com/w3c/csswg-drafts/issues">GitHub Issues</a> are preferred for discussion of this specification.
	When filing an issue, please put the text “css-display” in the title,
	preferably like this:
	“[css-display] <i data-lt>…summary of comment…</i>”.
	All issues and comments are <a href="https://lists.w3.org/Archives/Public/public-css-archive/">archived</a>,
	and there is also a <a href="https://lists.w3.org/Archives/Public/www-style/">historical archive</a>. </p>
   <p> This document was produced by the <a href="https://www.w3.org/Style/CSS/">CSS Working Group</a>. </p>
   <p> This document was produced by a group operating under
	the <a href="https://www.w3.org/Consortium/Patent-Policy/">W3C Patent Policy</a>.
	W3C maintains a <a href="https://www.w3.org/2004/01/pp-impl/32061/status" rel="disclosure">public list of any patent disclosures</a> made in connection with the deliverables of the group;
	that page also includes instructions for disclosing a patent.
	An individual who has actual knowledge of a patent which the individual believes contains <a href="https://www.w3.org/Consortium/Patent-Policy/#def-essential">Essential Claim(s)</a> must disclose the information in accordance with <a href="https://www.w3.org/Consortium/Patent-Policy/#sec-Disclosure">section 6 of the W3C Patent Policy</a>. </p>
   <p> This document is governed by the <a href="https://www.w3.org/2019/Process-20190301/" id="w3c_process_revision">1 March 2019 W3C Process Document</a>. </p>
   <p></p>
  </div>
  <div data-fill-with="at-risk">
   <p>The following features are at-risk, and may be dropped during the CR period: </p>
   <ul>
    <li>Application of <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-first-letter" id="ref-for-selectordef-first-letter">::first-letter</a> in the presence of run-ins
    <li><a class="css" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display①">display: run-in</a>
    <li>All multi-keyword values of <a class="property" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display②">display</a>
   </ul>
   <p>“At-risk” is a W3C Process term-of-art, and does not necessarily imply that the feature is in danger of being dropped or delayed. It means that the WG believes the feature may have difficulty being interoperably implemented in a timely manner, and marking it as such allows the WG to drop the feature if necessary when transitioning to the Proposed Rec stage, without having to publish a new Candidate Rec without the feature first.</p>
  </div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li>
     <a href="#intro"><span class="secno">1</span> <span class="content"> Introduction</span></a>
     <ol class="toc">
      <li><a href="#placement"><span class="secno">1.1</span> <span class="content"> Module interactions</span></a>
      <li><a href="#values"><span class="secno">1.2</span> <span class="content"> Values</span></a>
     </ol>
    <li>
     <a href="#the-display-properties"><span class="secno">2</span> <span class="content"> Box Layout Modes: the <span class="property">display</span> property</span></a>
     <ol class="toc">
      <li><a href="#outer-role"><span class="secno">2.1</span> <span class="content"> Outer Display Roles for Flow Layout: the <span class="css">block</span>, <span class="css">inline</span>, and <span class="css">run-in</span> keywords</span></a>
      <li><a href="#inner-model"><span class="secno">2.2</span> <span class="content"> Inner Display Layout Models: the <span class="css">flow</span>, <span class="css">flow-root</span>, <span class="css">table</span>, <span class="css">flex</span>, <span class="css">grid</span>, and <span class="css">ruby</span> keywords</span></a>
      <li><a href="#list-items"><span class="secno">2.3</span> <span class="content"> Generating Marker Boxes: the <span class="css">list-item</span> keyword</span></a>
      <li><a href="#layout-specific-display"><span class="secno">2.4</span> <span class="content"> Layout-Internal Display Types: the <span class="css">table-*</span> and <span class="css">ruby-*</span> keywords</span></a>
      <li><a href="#box-generation"><span class="secno">2.5</span> <span class="content"> Box Generation: the <span class="css">none</span> and <span class="css">contents</span> keywords</span></a>
      <li><a href="#legacy-display"><span class="secno">2.6</span> <span class="content"> Precomposed Inline-level Display Values</span></a>
      <li><a href="#transformations"><span class="secno">2.7</span> <span class="content"> Automatic Box Type Transformations</span></a>
     </ol>
    <li><a href="#run-in-layout"><span class="secno">3</span> <span class="content"> Run-In Layout</span></a>
    <li><a href="#glossary"><span class="secno"></span> <span class="content"> Appendix A: Glossary</span></a>
    <li>
     <a href="#unbox"><span class="secno"></span> <span class="content"> Appendix B: Effects of <span class="css">display: contents</span> on Unusual Elements</span></a>
     <ol class="toc">
      <li><a href="#unbox-html"><span class="secno"></span> <span class="content">HTML Elements</span></a>
      <li><a href="#unbox-svg"><span class="secno"></span> <span class="content">SVG Elements</span></a>
      <li><a href="#unbox-mathml"><span class="secno"></span> <span class="content">MathML Elements</span></a>
     </ol>
    <li><a href="#box-guidelines"><span class="secno"></span> <span class="content"> Appendix C: Box Construction Guidelines for Spec Authors</span></a>
    <li><a href="#acknowledgments"><span class="secno"></span> <span class="content"> Acknowledgments</span></a>
    <li>
     <a href="#changes"><span class="secno"></span> <span class="content"> Changes</span></a>
     <ol class="toc">
      <li><a href="#changes-wd"><span class="secno"></span> <span class="content"> Changes Prior to Candidate Recommendation Status</span></a>
     </ol>
    <li><a href="#priv-sec"><span class="secno"></span> <span class="content"> Privacy and Security Considerations</span></a>
    <li>
     <a href="#conformance"><span class="secno"></span> <span class="content"> Conformance</span></a>
     <ol class="toc">
      <li><a href="#document-conventions"><span class="secno"></span> <span class="content"> Document conventions</span></a>
      <li><a href="#conform-classes"><span class="secno"></span> <span class="content"> Conformance classes</span></a>
      <li>
       <a href="#conform-responsible"><span class="secno"></span> <span class="content"> Requirements for Responsible Implementation of CSS</span></a>
       <ol class="toc">
        <li><a href="#conform-partial"><span class="secno"></span> <span class="content"> Partial Implementations</span></a>
        <li><a href="#conform-future-proofing"><span class="secno"></span> <span class="content"> Implementations of Unstable and Proprietary Features</span></a>
        <li><a href="#conform-testing"><span class="secno"></span> <span class="content"> Implementations of CR-level Features</span></a>
       </ol>
     </ol>
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
      <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
      <li><a href="#informative"><span class="secno"></span> <span class="content">Informative References</span></a>
     </ol>
    <li><a href="#property-index"><span class="secno"></span> <span class="content">Property Index</span></a>
   </ol>
  </nav>
  <main>
   <h2 class="heading settled" data-level="1" id="intro"><span class="secno">1. </span><span class="content"> Introduction</span><a class="self-link" href="#intro"></a></h2>
   <p><em>This section is normative.</em> </p>
   <p>CSS takes a source document, organized as
	a <dfn class="dfn-paneled" data-dfn-for="CSS" data-dfn-type="dfn" data-export data-lt="element tree" id="element-tree">tree<span id="css-element-tree"></span></dfn> of <dfn class="dfn-paneled" data-dfn-for="CSS" data-dfn-type="dfn" data-export data-lt="element" id="elements">elements<span id="css-element"></span></dfn> and <dfn class="dfn-paneled" data-dfn-for="CSS" data-dfn-type="dfn" data-export data-lt="text node" id="text-nodes">text nodes<span id="css-text-node"></span></dfn>,
	and renders it onto a <a href="https://www.w3.org/TR/CSS2/intro.html#canvas">canvas</a> (such as your screen, a piece of paper, or an audio stream).
	To do this, it generates an intermediary structure,
	the <dfn class="dfn-paneled" data-dfn-for="CSS" data-dfn-type="dfn" data-export id="box-tree">box tree<span id="css-box-tree"></span></dfn>,
	which represents the formatting structure of the rendered document.
	Each <dfn class="dfn-paneled" data-dfn-for="CSS" data-dfn-type="dfn" data-export id="box">box<span id="css-box"></span></dfn> in the <a data-link-type="dfn" href="#box-tree" id="ref-for-box-tree">box tree</a> represents its corresponding <a data-link-type="dfn" href="#elements" id="ref-for-elements">element</a> (or <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#pseudo-element" id="ref-for-pseudo-element">pseudo-element</a>)
	in space and/or time on the canvas,
	while each <dfn class="dfn-paneled" data-dfn-for="CSS" data-dfn-type="dfn" data-export id="text-run">text run<span id="css-text-run"></span></dfn> in the <span id="ref-for-box-tree①">box tree</span> likewise represents the contents of its corresponding <a data-link-type="dfn" href="#text-nodes" id="ref-for-text-nodes">text nodes</a>.</p>
   <p>To create the <a data-link-type="dfn" href="#box-tree" id="ref-for-box-tree②">box tree</a>,
	CSS first uses <a href="https://www.w3.org/TR/css-cascade/">cascading and inheritance</a>,
	to assign a <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#computed-value" id="ref-for-computed-value">computed value</a> for each CSS property
	to each <a data-link-type="dfn" href="#elements" id="ref-for-elements①">element</a> and <a data-link-type="dfn" href="#text-nodes" id="ref-for-text-nodes①">text node</a> in the source tree.
	(See <a data-link-type="biblio" href="#biblio-css3-cascade">[CSS3-CASCADE]</a>.)</p>
   <p>Then, for each <a data-link-type="dfn" href="#elements" id="ref-for-elements②">element</a>,
	CSS generates zero or more <a data-link-type="dfn" href="#box" id="ref-for-box">boxes</a> as specified by that element’s <a class="property" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display③">display</a> property.
	Typically, an element generates a single <span id="ref-for-box①">box</span>,
	the <a data-link-type="dfn" href="#principal-box" id="ref-for-principal-box">principal box</a>,
	which represents itself and contains its contents in the <a data-link-type="dfn" href="#box-tree" id="ref-for-box-tree③">box tree</a>.
	However, some <span class="property" id="ref-for-propdef-display④">display</span> values
	(e.g. <span class="css" id="ref-for-propdef-display⑤">display: list-item</span>)
	generate more than one box
	(e.g. a <a href="https://www.w3.org/TR/CSS2/visuren.html#principal-box">principal block box</a> and a child <a href="https://www.w3.org/TR/CSS2/generate.html#lists">marker box</a>).
	And some values
	(such as <a class="css" data-link-type="maybe" href="#valdef-display-none" id="ref-for-valdef-display-none">none</a> or <a class="css" data-link-type="maybe" href="#valdef-display-contents" id="ref-for-valdef-display-contents">contents</a>)
	cause the <span id="ref-for-elements③">element</span> and/or its descendants to not generate any <span id="ref-for-box②">boxes</span> at all. <span id="ref-for-box③">Boxes</span> are often referred to by their <span class="property" id="ref-for-propdef-display⑥">display</span> type—<wbr>e.g. a <span id="ref-for-box④">box</span> generated by an element with <span class="css" id="ref-for-propdef-display⑦">display: block</span> is called a “block box” or just a “block”.</p>
   <p>A <a data-link-type="dfn" href="#box" id="ref-for-box⑤">box</a> is assigned the same styles as its generating <a data-link-type="dfn" href="#elements" id="ref-for-elements④">element</a>, unless otherwise indicated.
	In general, <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#inherited-property" id="ref-for-inherited-property">inherited properties</a> are assigned to the <a data-link-type="dfn" href="#principal-box" id="ref-for-principal-box①">principal box</a>,
	and then inherit through the box tree
	to any other boxes generated by the same element.
	Non-inherited properties default to applying to the <span id="ref-for-principal-box②">principal box</span>,
	but when the element generates multiple boxes,
	are sometimes defined to apply to a different box:
	for example, the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border" id="ref-for-propdef-border">border</a> properties applied to a table element
	are applied to its <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-grid-box" id="ref-for-table-grid-box">table grid box</a>,
	not to its <span id="ref-for-principal-box③">principal</span> <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-wrapper-box" id="ref-for-table-wrapper-box">table wrapper box</a>.
	If the value computation process alters the styles of those boxes,
	and the element’s style is requested
	(such as through <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/cssom-1/#dom-window-getcomputedstyle" id="ref-for-dom-window-getcomputedstyle">getComputedStyle()</a></code>),
	the element reflects,
	for each property,
	the value from the box to which that property was applied.</p>
   <p>Similarly, each contiguous sequence of sibling <a data-link-type="dfn" href="#text-nodes" id="ref-for-text-nodes②">text nodes</a> generates a <a data-link-type="dfn" href="#text-run" id="ref-for-text-run">text run</a> containing their text contents,
	which is assigned the same styles as the generating <span id="ref-for-text-nodes③">text nodes</span>.
	If the sequence contains no text, however, it does not generate a <span id="ref-for-text-run①">text run</span>.</p>
   <p>In constructing the box tree,
	boxes generated by an element are descendants of
	the principal box of any ancestor elements.
	In the general case,
	the direct <dfn class="dfn-paneled" data-dfn-for="CSS" data-dfn-type="dfn" data-export id="css-parent-box">parent box</dfn> of an element’s <a data-link-type="dfn" href="#principal-box" id="ref-for-principal-box④">principal box</a> is the <span id="ref-for-principal-box⑤">principal box</span> of its nearest ancestor element that generates a <a data-link-type="dfn" href="#box" id="ref-for-box⑥">box</a>;
	however, there are some exceptions,
	such as for <a class="css" data-link-type="maybe" href="#valdef-display-run-in" id="ref-for-valdef-display-run-in">run-in</a> boxes,
	display types (like tables) that generate multiple container boxes,
	and intervening <a data-link-type="dfn" href="#anonymous" id="ref-for-anonymous">anonymous boxes</a>.</p>
   <p>An <dfn class="dfn-paneled" data-dfn-for="CSS" data-dfn-type="dfn" data-export data-lt="anonymous|anonymous box" id="anonymous">anonymous box<span id="css-anonymous"></span></dfn> is a box that is not associated with any element. <a data-link-type="dfn" href="#anonymous" id="ref-for-anonymous①">Anonymous boxes</a> are generated in certain circumstances
	to fix up the <a data-link-type="dfn" href="#box-tree" id="ref-for-box-tree④">box tree</a> when it requires a particular nested structure
	that is not provided by the boxes generated from the <a data-link-type="dfn" href="#element-tree" id="ref-for-element-tree">element tree</a>.
	For example, a <a href="https://www.w3.org/TR/CSS2/tables.html#table-display">table cell box</a> requires a particular type of parent box (the <a href="https://www.w3.org/TR/CSS2/tables.html#table-display">table row box</a>),
	and will generate an <span id="ref-for-anonymous②">anonymous</span> <a href="https://www.w3.org/TR/CSS2/tables.html#table-display">table row box</a> around itself
	if its parent is not a <a href="https://www.w3.org/TR/CSS2/tables.html#table-display">table row box</a>.
	(See <a data-link-type="biblio" href="#biblio-css2">[CSS2]</a> § <a href="https://www.w3.org/TR/CSS2/tables.html#anonymous-boxes">17.2.1</a>.)
	Unlike element-generated boxes, whose styles inherit strictly through the element tree,
	anonymous boxes (which only exist in the <span id="ref-for-box-tree⑤">box tree</span>) <a href="https://www.w3.org/TR/css-cascade/#inheriting">inherit</a> through their <span id="ref-for-box-tree⑥">box tree</span> parentage.</p>
   <p>In the course of layout, <a data-link-type="dfn" href="#box" id="ref-for-box⑦">boxes</a> and <a data-link-type="dfn" href="#text-run" id="ref-for-text-run②">text runs</a> can be broken into multiple <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-3/#fragment" id="ref-for-fragment">fragments</a>.
	This happens, for example, when an <a data-link-type="dfn" href="#inline-box" id="ref-for-inline-box">inline box</a> and/or <span id="ref-for-text-run③">text run</span> is broken across lines,
	or when a <a data-link-type="dfn" href="#block-box" id="ref-for-block-box">block box</a> is broken across pages or columns,
	in a process called <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-4/#fragmentation" id="ref-for-fragmentation">fragmentation</a>.
	It can also happen due to bidi reordering of text
	(see <a href="https://www.w3.org/TR/css-writing-modes-3/#bidi-algo">Applying the Bidirectional Reordering Algorithm</a> in <a href="https://www.w3.org/TR/css-writing-modes-3/#text-direction">CSS Writing Modes</a>)
	or higher-level <a data-link-type="dfn" href="#display-type" id="ref-for-display-type">display type</a> box splitting,
	e.g. <a href="https://www.w3.org/TR/CSS2/visuren.html#img-anon-block">block-in-inline splitting</a> (see <a href="https://www.w3.org/TR/CSS2/visuren.html#box-gen">CSS2§9.2</a>)
	or <a href="https://www.w3.org/TR/css-multicol-1/#spanning-columns">column-spanner-in-block</a> splitting
	(see <a href="https://www.w3.org/TR/css-multicol-1/#spanning-columns">CSS Multi-column Layout</a>).
	A <span id="ref-for-box⑧">box</span> therefore consists of one or more <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-4/#box-fragment" id="ref-for-box-fragment">box fragments</a>,
	and a <span id="ref-for-text-run④">text run</span> consists of one or more <span id="ref-for-fragment①">text fragments</span>.
	See <a data-link-type="biblio" href="#biblio-css3-break">[CSS3-BREAK]</a> for more information on <span id="ref-for-fragmentation①">fragmentation</span>.</p>
   <p class="note" role="note"><span>Note:</span> Many of the CSS specs were written before this terminology was ironed out,
	or refer to things incorrectly,
	so view older specs with caution when they’re using these terms.
	It should be possible to infer from context which term they really mean.
	Please <a href="#status">report errors</a> in specs when you find them,
	so they can be corrected.</p>
   <p class="note" role="note"><span>Note:</span> Further information on the “aural” box tree
	and its interaction with the <a class="property" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display⑧">display</a> property
	can be found in the <a href="https://www.w3.org/TR/css3-speech/#aural-model">CSS Speech Module</a>. <a data-link-type="biblio" href="#biblio-css-speech-1">[CSS-SPEECH-1]</a></p>
   <h3 class="heading settled" data-level="1.1" id="placement"><span class="secno">1.1. </span><span class="content"> Module interactions</span><a class="self-link" href="#placement"></a></h3>
   <p>This module replaces and extends the definition of the <a class="property" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display⑨">display</a> property defined in <a data-link-type="biblio" href="#biblio-css2">[CSS2]</a> section 9.2.4.</p>
   <p>None of the properties in this module apply to the <code>::first-line</code> or <code>::first-letter</code> pseudo-elements.</p>
   <h3 class="heading settled" data-level="1.2" id="values"><span class="secno">1.2. </span><span class="content"> Values</span><a class="self-link" href="#values"></a></h3>
   <p>This specification follows the <a href="https://www.w3.org/TR/CSS21/about.html#property-defs">CSS property definition conventions</a> from <a data-link-type="biblio" href="#biblio-css2">[CSS2]</a>.
	Value types not defined in this specification are defined in CSS Values &amp; Units <a data-link-type="biblio" href="#biblio-css-values-3">[CSS-VALUES-3]</a>.
	Other CSS modules may expand the definitions of these value types.</p>
   <p>In addition to the property-specific values listed in their definitions,
	all properties defined in this specification
	also accept the <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#css-wide-keywords" id="ref-for-css-wide-keywords">CSS-wide keywords</a> keywords as their property value.
	For readability they have not been repeated explicitly.</p>
   <h2 class="heading settled" data-level="2" id="the-display-properties"><span class="secno">2. </span><span class="content"> Box Layout Modes: the <a class="property" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display①⓪">display</a> property</span><a class="self-link" href="#the-display-properties"></a></h2>
   <table class="def propdef" data-link-for-hint="display">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-display">display</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">[ <a class="production css" data-link-type="type" href="#typedef-display-outside" id="ref-for-typedef-display-outside" title="Expands to: inline | run-in | block">&lt;display-outside></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-any" id="ref-for-comb-any">||</a> <a class="production css" data-link-type="type" href="#typedef-display-inside" id="ref-for-typedef-display-inside" title="Expands to: flex | flow | grid | flow-root | table | ruby">&lt;display-inside></a> ] <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one">|</a> <a class="production css" data-link-type="type" href="#typedef-display-listitem" id="ref-for-typedef-display-listitem">&lt;display-listitem></a> <span id="ref-for-comb-one①">|</span> <a class="production css" data-link-type="type" href="#typedef-display-internal" id="ref-for-typedef-display-internal" title="Expands to: table-row-group | ruby-base-container | table-header-group | table-footer-group | table-column | ruby-text-container | ruby-base | ruby-text | table-row | table-caption | table-cell | table-column-group">&lt;display-internal></a> <span id="ref-for-comb-one②">|</span> <a class="production css" data-link-type="type" href="#typedef-display-box" id="ref-for-typedef-display-box" title="Expands to: none | contents">&lt;display-box></a> <span id="ref-for-comb-one③">|</span> <a class="production css" data-link-type="type" href="#typedef-display-legacy" id="ref-for-typedef-display-legacy" title="Expands to: inline-table | inline-grid | inline-flex | inline-block">&lt;display-legacy></a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>inline 
     <tr>
      <th>Applies to:
      <td><a href="https://drafts.csswg.org/css-pseudo/#generated-content" title="Includes ::before and ::after pseudo-elements.">all elements</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>n/a 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>see prose in a variety of specs 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>not animatable 
   </table>
   <p class="all-media">User Agents are expected to support this property on all media, including non-visual ones.</p>
   <p>The <a class="property" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display①①">display</a> property defines an element’s <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="display-type">display type</dfn>,
	which consists of the two basic qualities of how an element generates boxes:</p>
   <ul>
    <li data-md>
     <p>the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-local-lt="inner" id="inner-display-type">inner display type</dfn>,
which defines (if it is a <a data-link-type="dfn" href="#replaced-element" id="ref-for-replaced-element">non-replaced element</a>) the kind of <a data-link-type="dfn" href="#formatting-context" id="ref-for-formatting-context">formatting context</a> it generates,
dictating how its descendant boxes are laid out.
(The inner display of a <span id="ref-for-replaced-element①">replaced element</span> is outside the scope of CSS.)</p>
    <li data-md>
     <p>the <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-local-lt="outer" id="outer-display-type">outer display type</dfn>,
which dictates how the <a data-link-type="dfn" href="#principal-box" id="ref-for-principal-box⑥">principal box</a> itself participates in <a data-link-type="dfn" href="#flow-layout" id="ref-for-flow-layout">flow layout</a>.</p>
   </ul>
   <p><a data-link-type="dfn" href="#text-run" id="ref-for-text-run⑤">Text runs</a> have no <a data-link-type="dfn" href="#display-type" id="ref-for-display-type①">display type</a>.</p>
   <p>Some <a class="property" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display①②">display</a> values have additional side-effects:
	such as <a class="css" data-link-type="maybe" href="#valdef-display-list-item" id="ref-for-valdef-display-list-item">list-item</a>, which also generates a <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-marker" id="ref-for-selectordef-marker">::marker</a> pseudo-element,
	and <a class="css" data-link-type="maybe" href="#valdef-display-none" id="ref-for-valdef-display-none①">none</a>, which causes the element’s entire subtree to be left out of the box tree.</p>
   <div class="advisement"> The <a class="property" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display①③">display</a> property has no effect on an element’s semantics:
		these are defined by the <a data-link-type="dfn" href="https://drafts.csswg.org/selectors-4/#document-language" id="ref-for-document-language">document language</a> and <em>are not affected by CSS</em>.
		Aside from the <a class="css" data-link-type="maybe" href="#valdef-display-none" id="ref-for-valdef-display-none②">none</a> value,
		which also affects the aural/speech output <a data-link-type="biblio" href="#biblio-css-speech-1">[CSS-SPEECH-1]</a> and interactivity of an element and its descendants,
		the <span class="property" id="ref-for-propdef-display①④">display</span> property only affects visual layout:
		its purpose is to allow designers freedom
		to change the layout behavior of an element <em>without</em> affecting the underlying document semantics. </div>
   <p>Values are defined as follows:</p>
<pre class="prod"><dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-display-outside">&lt;display-outside></dfn>  = block <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one④">|</a> inline <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑤">|</a> run-in
<dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-display-inside">&lt;display-inside></dfn>   = flow <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑥">|</a> flow-root <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑦">|</a> table <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑧">|</a> flex <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑨">|</a> grid <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⓪">|</a> ruby
<dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-display-listitem">&lt;display-listitem></dfn> = <a class="production" data-link-type="type" href="#typedef-display-outside" id="ref-for-typedef-display-outside①" title="Expands to: inline | run-in | block">&lt;display-outside></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt">?</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-all" id="ref-for-comb-all">&amp;&amp;</a> [ flow <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①①">|</a> flow-root ]<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt①">?</a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-all" id="ref-for-comb-all①">&amp;&amp;</a> list-item
<dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-display-internal">&lt;display-internal></dfn> = table-row-group <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①②">|</a> table-header-group <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①③">|</a>
                     table-footer-group <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①④">|</a> table-row <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⑤">|</a> table-cell <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⑥">|</a>
                     table-column-group <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⑦">|</a> table-column <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⑧">|</a> table-caption <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①⑨">|</a>
                     ruby-base <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②⓪">|</a> ruby-text <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②①">|</a> ruby-base-container <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②②">|</a>
                     ruby-text-container
<dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-display-box">&lt;display-box></dfn>      = contents <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②③">|</a> none
<dfn class="dfn-paneled" data-dfn-type="type" data-export id="typedef-display-legacy">&lt;display-legacy></dfn>   = inline-block <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②④">|</a> inline-table <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②⑤">|</a> inline-flex <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one②⑥">|</a> inline-grid
</pre>
   <p>The following informative table summarizes the values of <a class="property" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display①⑤">display</a>:</p>
   <table class="data" id="display-value-summary">
    <thead>
     <tr>
      <th>Short <a class="property" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display①⑥">display</a> 
      <th>Full <a class="property" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display①⑦">display</a> 
      <th>Generated box 
    <tbody title="Box Suppression Display Types">
     <tr>
      <td><a class="css" data-link-type="maybe" href="#valdef-display-none" id="ref-for-valdef-display-none③">none</a> 
      <td>— 
      <td>subtree omitted from <a data-link-type="dfn" href="#box-tree" id="ref-for-box-tree⑦">box tree</a> 
     <tr>
      <td><a class="css" data-link-type="maybe" href="#valdef-display-contents" id="ref-for-valdef-display-contents①">contents</a> 
      <td>— 
      <td>element replaced by contents in <a data-link-type="dfn" href="#box-tree" id="ref-for-box-tree⑧">box tree</a> 
    <tbody title="Flow Layout Display Types">
     <tr>
      <td><a class="css" data-link-type="maybe" href="#valdef-display-block" id="ref-for-valdef-display-block">block</a> 
      <td><span class="css">block flow</span> 
      <td><a data-link-type="dfn" href="#block-level" id="ref-for-block-level">block-level</a> <a data-link-type="dfn" href="#block-container" id="ref-for-block-container">block container</a> <abbr title="also known as">aka</abbr> <a data-link-type="dfn" href="#block-box" id="ref-for-block-box①">block box</a> 
     <tr>
      <td><a class="css" data-link-type="maybe" href="#valdef-display-flow-root" id="ref-for-valdef-display-flow-root">flow-root</a> 
      <td><span class="css">block flow-root</span> 
      <td><a data-link-type="dfn" href="#block-level" id="ref-for-block-level①">block-level</a> <a data-link-type="dfn" href="#block-container" id="ref-for-block-container①">block container</a> that establishes a new <a data-link-type="dfn" href="#block-formatting-context" id="ref-for-block-formatting-context">block formatting context</a> (<a data-link-type="dfn" href="#bfc" id="ref-for-bfc">BFC</a>) 
     <tr>
      <td><a class="css" data-link-type="maybe" href="#valdef-display-inline" id="ref-for-valdef-display-inline">inline</a> 
      <td><span class="css">inline flow</span> 
      <td><a data-link-type="dfn" href="#inline-box" id="ref-for-inline-box①">inline box</a> 
     <tr>
      <td><a class="css" data-link-type="maybe" href="#valdef-display-inline-block" id="ref-for-valdef-display-inline-block">inline-block</a> 
      <td><span class="css">inline flow-root</span> 
      <td><a data-link-type="dfn" href="#inline-level" id="ref-for-inline-level">inline-level</a> <a data-link-type="dfn" href="#block-container" id="ref-for-block-container②">block container</a> 
     <tr>
      <td><a class="css" data-link-type="maybe" href="#valdef-display-run-in" id="ref-for-valdef-display-run-in①">run-in</a> 
      <td><span class="css">run-in flow</span> 
      <td><a data-link-type="dfn" href="#run-in" id="ref-for-run-in">run-in box</a> (<a data-link-type="dfn" href="#inline-box" id="ref-for-inline-box②">inline box</a> with special box-tree-munging rules) 
     <tr>
      <td><a class="css" data-link-type="maybe" href="#valdef-display-list-item" id="ref-for-valdef-display-list-item①">list-item</a> 
      <td><span class="css">block flow list-item</span> 
      <td><a data-link-type="dfn" href="#block-box" id="ref-for-block-box②">block box</a> with additional <a href="https://www.w3.org/TR/CSS2/generate.html#lists">marker box</a> 
     <tr>
      <td><span class="css">inline list-item</span> 
      <td><span class="css">inline flow list-item</span> 
      <td><a data-link-type="dfn" href="#inline-box" id="ref-for-inline-box③">inline box</a> with additional <a href="https://www.w3.org/TR/CSS2/generate.html#lists">marker box</a> 
    <tbody title="Formatting Context Root Display Types">
     <tr>
      <td><a class="css" data-link-type="maybe" href="#valdef-display-flex" id="ref-for-valdef-display-flex">flex</a> 
      <td><span class="css">block flex</span> 
      <td><a data-link-type="dfn" href="#block-level" id="ref-for-block-level②">block-level</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container">flex container</a> 
     <tr>
      <td><a class="css" data-link-type="maybe" href="#valdef-display-inline-flex" id="ref-for-valdef-display-inline-flex">inline-flex</a> 
      <td><span class="css">inline flex</span> 
      <td><a data-link-type="dfn" href="#inline-level" id="ref-for-inline-level①">inline-level</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container①">flex container</a> 
     <tr>
      <td><a class="css" data-link-type="maybe" href="#valdef-display-grid" id="ref-for-valdef-display-grid">grid</a> 
      <td><span class="css">block grid</span> 
      <td><a data-link-type="dfn" href="#block-level" id="ref-for-block-level③">block-level</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-container" id="ref-for-grid-container">grid container</a> 
     <tr>
      <td><a class="css" data-link-type="maybe" href="#valdef-display-inline-grid" id="ref-for-valdef-display-inline-grid">inline-grid</a> 
      <td><span class="css">inline grid</span> 
      <td><a data-link-type="dfn" href="#inline-level" id="ref-for-inline-level②">inline-level</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-container" id="ref-for-grid-container①">grid container</a> 
     <tr>
      <td><a class="css" data-link-type="maybe" href="#valdef-display-ruby" id="ref-for-valdef-display-ruby">ruby</a> 
      <td><span class="css">inline ruby</span> 
      <td><a data-link-type="dfn" href="#inline-level" id="ref-for-inline-level③">inline-level</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-ruby-1/#ruby-container" id="ref-for-ruby-container">ruby container</a> 
     <tr>
      <td><span class="css">block ruby</span> 
      <td><span class="css">block ruby</span> 
      <td><a data-link-type="dfn" href="#block-box" id="ref-for-block-box③">block box</a> containing <a data-link-type="dfn" href="https://drafts.csswg.org/css-ruby-1/#ruby-container" id="ref-for-ruby-container①">ruby container</a> 
     <tr>
      <td><a class="css" data-link-type="maybe" href="#valdef-display-table" id="ref-for-valdef-display-table">table</a> 
      <td><span class="css">block table</span> 
      <td><a data-link-type="dfn" href="#block-level" id="ref-for-block-level④">block-level</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-wrapper-box" id="ref-for-table-wrapper-box①">table wrapper box</a> containing <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-grid-box" id="ref-for-table-grid-box①">table grid box</a> 
     <tr>
      <td><a class="css" data-link-type="maybe" href="#valdef-display-inline-table" id="ref-for-valdef-display-inline-table">inline-table</a> 
      <td><span class="css">inline table</span> 
      <td><a data-link-type="dfn" href="#inline-level" id="ref-for-inline-level④">inline-level</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-wrapper-box" id="ref-for-table-wrapper-box②">table wrapper box</a> containing <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-grid-box" id="ref-for-table-grid-box②">table grid box</a> 
    <tbody title="Layout-internal display types">
     <tr>
      <td><a class="production css" data-link-type="type" href="#typedef-display-internal" id="ref-for-typedef-display-internal①" title="Expands to: table-row-group | ruby-base-container | table-header-group | table-footer-group | table-column | ruby-text-container | ruby-base | ruby-text | table-row | table-caption | table-cell | table-column-group">&lt;display-internal></a> types 
      <td>— 
      <td><a href="#layout-specific-display">layout-specific internal box</a> 
   </table>
   <p class="note" role="note"><span>Note:</span> Following the precedence rules of “most backwards-compatible, then shortest”,
	serialization of equivalent <a class="property" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display①⑧">display</a> values uses the “Short <span class="property" id="ref-for-propdef-display①⑨">display</span>” column. <a data-link-type="biblio" href="#biblio-cssom">[CSSOM]</a></p>
   <h3 class="heading settled" data-level="2.1" id="outer-role"><span class="secno">2.1. </span><span class="content"> Outer Display Roles for Flow Layout: the <a class="css" data-link-type="maybe" href="#valdef-display-block" id="ref-for-valdef-display-block①">block</a>, <a class="css" data-link-type="maybe" href="#valdef-display-inline" id="ref-for-valdef-display-inline①">inline</a>, and <a class="css" data-link-type="maybe" href="#valdef-display-run-in" id="ref-for-valdef-display-run-in②">run-in</a> keywords</span><a class="self-link" href="#outer-role"></a></h3>
   <p>The <a class="production css" data-link-type="type" href="#typedef-display-outside" id="ref-for-typedef-display-outside②" title="Expands to: inline | run-in | block">&lt;display-outside></a> keywords specify the element’s <a data-link-type="dfn" href="#outer-display-type" id="ref-for-outer-display-type">outer display type</a>,
	which is essentially its <a data-link-type="dfn" href="#principal-box" id="ref-for-principal-box⑦">principal box’s</a> role in <a data-link-type="dfn" href="#flow-layout" id="ref-for-flow-layout①">flow layout</a>.
	They are defined as follows:</p>
   <dl>
    <dt><dfn class="dfn-paneled css" data-dfn-for="display, <display-outside>" data-dfn-type="value" data-export id="valdef-display-block">block</dfn> 
    <dd> The element generates a box that is <dfn class="dfn-paneled" data-dfn-for data-dfn-type="dfn" data-export data-lt="block-level box" id="block-level-box">block-level</dfn> when placed in <a data-link-type="dfn" href="#flow-layout" id="ref-for-flow-layout②">flow layout</a>. <a data-link-type="biblio" href="#biblio-css2">[CSS2]</a> 
    <dt><dfn class="dfn-paneled css" data-dfn-for="display, <display-outside>" data-dfn-type="value" data-export id="valdef-display-inline">inline</dfn> 
    <dd> The element generates a box that is <dfn class="dfn-paneled" data-dfn-for data-dfn-type="dfn" data-export data-lt="inline-level box" id="inline-level-box">inline-level</dfn> when placed in <a data-link-type="dfn" href="#flow-layout" id="ref-for-flow-layout③">flow layout</a>. <a data-link-type="biblio" href="#biblio-css2">[CSS2]</a> 
    <dt><dfn class="dfn-paneled css" data-dfn-for="display, <display-outside>" data-dfn-type="value" data-export id="valdef-display-run-in">run-in</dfn> 
    <dd> The element generates an <a data-link-type="dfn" href="#run-in" id="ref-for-run-in①">run-in box</a>,
			which is a type of <a data-link-type="dfn" href="#inline-level-box" id="ref-for-inline-level-box">inline-level box</a> with special behavior that attempts to merge it into a subsequent block container.
			See <a href="#run-in-layout">§ 3 Run-In Layout</a> for details. 
   </dl>
   <p>If a <a class="production css" data-link-type="type" href="#typedef-display-outside" id="ref-for-typedef-display-outside③" title="Expands to: inline | run-in | block">&lt;display-outside></a> value is specified but <a class="production css" data-link-type="type" href="#typedef-display-inside" id="ref-for-typedef-display-inside①" title="Expands to: flex | flow | grid | flow-root | table | ruby">&lt;display-inside></a> is omitted,
	the element’s <a data-link-type="dfn" href="#inner-display-type" id="ref-for-inner-display-type">inner display type</a> defaults to <a class="css" data-link-type="maybe" href="#valdef-display-flow" id="ref-for-valdef-display-flow">flow</a>.</p>
   <h3 class="heading settled" data-level="2.2" id="inner-model"><span class="secno">2.2. </span><span class="content"> Inner Display Layout Models: the <a class="css" data-link-type="maybe" href="#valdef-display-flow" id="ref-for-valdef-display-flow①">flow</a>, <a class="css" data-link-type="maybe" href="#valdef-display-flow-root" id="ref-for-valdef-display-flow-root①">flow-root</a>, <a class="css" data-link-type="maybe" href="#valdef-display-table" id="ref-for-valdef-display-table①">table</a>, <a class="css" data-link-type="maybe" href="#valdef-display-flex" id="ref-for-valdef-display-flex①">flex</a>, <a class="css" data-link-type="maybe" href="#valdef-display-grid" id="ref-for-valdef-display-grid①">grid</a>, and <a class="css" data-link-type="maybe" href="#valdef-display-ruby" id="ref-for-valdef-display-ruby①">ruby</a> keywords</span><a class="self-link" href="#inner-model"></a></h3>
   <p>The <a class="production css" data-link-type="type" href="#typedef-display-inside" id="ref-for-typedef-display-inside②" title="Expands to: flex | flow | grid | flow-root | table | ruby">&lt;display-inside></a> keywords specify the element’s <a data-link-type="dfn" href="#inner-display-type" id="ref-for-inner-display-type①">inner display type</a>,
	which defines the type of formatting context that lays out its contents
	(assuming it is a <a data-link-type="dfn" href="#replaced-element" id="ref-for-replaced-element②">non-replaced element</a>).
	They are defined as follows:</p>
   <dl>
    <dt><dfn class="dfn-paneled css" data-dfn-for="display, <display-inside>" data-dfn-type="value" data-export id="valdef-display-flow">flow</dfn> 
    <dd>
      The element lays out its contents using <dfn class="dfn-paneled" data-dfn-for data-dfn-type="dfn" data-export id="flow-layout">flow layout</dfn> (<a href="https://www.w3.org/TR/CSS2/visuren.html">block-and-inline layout</a>). 
     <p>If its <a data-link-type="dfn" href="#outer-display-type" id="ref-for-outer-display-type①">outer display type</a> is <a class="css" data-link-type="maybe" href="#valdef-display-inline" id="ref-for-valdef-display-inline②">inline</a> or <a class="css" data-link-type="maybe" href="#valdef-display-run-in" id="ref-for-valdef-display-run-in③">run-in</a>,
			and it is participating in a <a data-link-type="dfn" href="#block-formatting-context" id="ref-for-block-formatting-context①">block</a> or <a data-link-type="dfn" href="#inline-formatting-context" id="ref-for-inline-formatting-context">inline</a> formatting context,
			then it generates an <a data-link-type="dfn" href="#inline-box" id="ref-for-inline-box④">inline box</a>.</p>
     <p>Otherwise it generates a <a data-link-type="dfn" href="#block-container" id="ref-for-block-container③">block container</a> box.</p>
     <p>Depending on the value of other properties (such as <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-position" id="ref-for-propdef-position">position</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visuren.html#propdef-float" id="ref-for-propdef-float">float</a>, or <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visufx.html#propdef-overflow" id="ref-for-propdef-overflow">overflow</a>)
			and whether it is itself participating in a block or inline <a data-link-type="dfn" href="#formatting-context" id="ref-for-formatting-context①">formatting context</a>,
			it either establishes a new <a data-link-type="dfn" href="#block-formatting-context" id="ref-for-block-formatting-context②">block formatting context</a> for its contents
			or integrates its contents into its parent <span id="ref-for-formatting-context②">formatting context</span>.
			See <a href="https://www.w3.org/TR/CSS2/visuren.html">CSS2.1 Chapter 9</a>. <a data-link-type="biblio" href="#biblio-css2">[CSS2]</a> A <a data-link-type="dfn" href="#block-container" id="ref-for-block-container④">block container</a> that establishes a new <span id="ref-for-block-formatting-context③">block formatting context</span> is considered to have a used <a data-link-type="dfn" href="#inner-display-type" id="ref-for-inner-display-type②">inner display type</a> of <a class="css" data-link-type="maybe" href="#valdef-display-flow-root" id="ref-for-valdef-display-flow-root②">flow-root</a>.</p>
    <dt><dfn class="dfn-paneled css" data-dfn-for="display, <display-inside>" data-dfn-type="value" data-export id="valdef-display-flow-root">flow-root</dfn> 
    <dd> The element generates a <a data-link-type="dfn" href="#block-container" id="ref-for-block-container⑤">block container</a> box,
			and lays out its contents using <a data-link-type="dfn" href="#flow-layout" id="ref-for-flow-layout④">flow layout</a>.
			It always establishes a new <a data-link-type="dfn" href="#block-formatting-context" id="ref-for-block-formatting-context④">block formatting context</a> for its contents. <a data-link-type="biblio" href="#biblio-css2">[CSS2]</a> 
    <dt><dfn class="dfn-paneled css" data-dfn-for="display, <display-inside>" data-dfn-type="value" data-export id="valdef-display-table">table</dfn> 
    <dd> The element generates a principal <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-wrapper-box" id="ref-for-table-wrapper-box③">table wrapper box</a> that establishes a <a data-link-type="dfn" href="#block-formatting-context" id="ref-for-block-formatting-context⑤">block formatting context</a>,
			and which contains
			an additionally-generated <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-grid-box" id="ref-for-table-grid-box③">table grid box</a> that establishes a <a data-link-type="dfn">table formatting context</a>. <a data-link-type="biblio" href="#biblio-css2">[CSS2]</a> 
    <dt><dfn class="dfn-paneled css" data-dfn-for="display, <display-inside>" data-dfn-type="value" data-export id="valdef-display-flex">flex</dfn> 
    <dd> The element generates a principal <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container②">flex container</a> box
			and establishes a <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-formatting-context" id="ref-for-flex-formatting-context">flex formatting context</a>. <a data-link-type="biblio" href="#biblio-css3-flexbox">[CSS3-FLEXBOX]</a> 
    <dt><dfn class="dfn-paneled css" data-dfn-for="display, <display-inside>" data-dfn-type="value" data-export id="valdef-display-grid">grid</dfn> 
    <dd> The element generates a principal <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-container" id="ref-for-grid-container②">grid container</a> box,
			and establishes a <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-formatting-context" id="ref-for-grid-formatting-context">grid formatting context</a>. <a data-link-type="biblio" href="#biblio-css3-grid-layout">[CSS3-GRID-LAYOUT]</a> 
    <dt><dfn class="dfn-paneled css" data-dfn-for="display, <display-inside>" data-dfn-type="value" data-export id="valdef-display-ruby">ruby</dfn> 
    <dd> The element generates a <a data-link-type="dfn" href="https://drafts.csswg.org/css-ruby-1/#ruby-container" id="ref-for-ruby-container②">ruby container</a> box
			and establishes a <a data-link-type="dfn" href="https://drafts.csswg.org/css-ruby-1/#ruby-formatting-context" id="ref-for-ruby-formatting-context">ruby formatting context</a> in addition to integrating its base-level contents
			into its parent <a data-link-type="dfn" href="#formatting-context" id="ref-for-formatting-context③">formatting context</a> (if it is inline)
			or generating a wrapper box of the appropriate <a data-link-type="dfn" href="#outer-display-type" id="ref-for-outer-display-type②">outer display type</a> (if it is not). <a data-link-type="biblio" href="#biblio-css3ruby">[CSS3RUBY]</a> 
   </dl>
   <p>If a <a class="production css" data-link-type="type" href="#typedef-display-inside" id="ref-for-typedef-display-inside③" title="Expands to: flex | flow | grid | flow-root | table | ruby">&lt;display-inside></a> value is specified but <a class="production css" data-link-type="type" href="#typedef-display-outside" id="ref-for-typedef-display-outside④" title="Expands to: inline | run-in | block">&lt;display-outside></a> is omitted,
	the element’s <a data-link-type="dfn" href="#outer-display-type" id="ref-for-outer-display-type③">outer display type</a> defaults to <a class="css" data-link-type="maybe" href="#valdef-display-block" id="ref-for-valdef-display-block②">block</a>—<wbr>except for <a class="css" data-link-type="maybe" href="#valdef-display-ruby" id="ref-for-valdef-display-ruby②">ruby</a>, which defaults to <a class="css" data-link-type="maybe" href="#valdef-display-inline" id="ref-for-valdef-display-inline③">inline</a>.</p>
   <h3 class="heading settled" data-level="2.3" id="list-items"><span class="secno">2.3. </span><span class="content"> Generating Marker Boxes: the <a class="css" data-link-type="maybe" href="#valdef-display-list-item" id="ref-for-valdef-display-list-item②">list-item</a> keyword</span><a class="self-link" href="#list-items"></a></h3>
   <p>The <dfn class="dfn-paneled css" data-dfn-for="display, <display-list-item>" data-dfn-type="value" data-export id="valdef-display-list-item">list-item</dfn> keyword
	causes the element to generate a <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-marker" id="ref-for-selectordef-marker①">::marker</a> pseudo-element <a data-link-type="biblio" href="#biblio-css-pseudo-4">[CSS-PSEUDO-4]</a> with the content specified by its <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/generate.html#propdef-list-style" id="ref-for-propdef-list-style">list-style</a> properties
	(<a href="https://www.w3.org/TR/CSS2/generate.html#lists">CSS 2.1§12.5 Lists</a>) <a data-link-type="biblio" href="#biblio-css2">[CSS2]</a> together with a principal box of the specified type for its own contents.</p>
   <p>If no <a data-link-type="dfn" href="#inner-display-type" id="ref-for-inner-display-type③">inner display type</a> value is specified,
	the principal box’s <span id="ref-for-inner-display-type④">inner display type</span> defaults to <a class="css" data-link-type="maybe" href="#valdef-display-flow" id="ref-for-valdef-display-flow②">flow</a>.
	If no <a data-link-type="dfn" href="#outer-display-type" id="ref-for-outer-display-type④">outer display type</a> value is specified,
	the principal box’s <span id="ref-for-outer-display-type⑤">outer display type</span> defaults to <a class="css" data-link-type="maybe" href="#valdef-display-block" id="ref-for-valdef-display-block③">block</a>.</p>
   <p class="note" role="note"><span>Note:</span> In this level, as restricted in the grammar,
	list-items are limited to the <a data-link-type="dfn" href="#flow-layout" id="ref-for-flow-layout⑤">Flow Layout</a> display types
	(<a class="css" data-link-type="maybe" href="#valdef-display-block" id="ref-for-valdef-display-block④">block</a>/<a class="css" data-link-type="maybe" href="#valdef-display-inline" id="ref-for-valdef-display-inline④">inline</a>/<a class="css" data-link-type="maybe" href="#valdef-display-run-in" id="ref-for-valdef-display-run-in④">run-in</a> with <a class="css" data-link-type="maybe" href="#valdef-display-flow" id="ref-for-valdef-display-flow③">flow</a>/<a class="css" data-link-type="maybe" href="#valdef-display-flow-root" id="ref-for-valdef-display-flow-root③">flow-root</a> inner types).
	This restriction may be relaxed in a future level of this module.</p>
   <h3 class="heading settled" data-level="2.4" id="layout-specific-display"><span class="secno">2.4. </span><span class="content"> Layout-Internal Display Types: the <span class="css">table-*</span> and <span class="css">ruby-*</span> keywords</span><a class="self-link" href="#layout-specific-display"></a></h3>
   <p>Some layout models, such as <a class="css" data-link-type="maybe" href="#valdef-display-table" id="ref-for-valdef-display-table②">table</a> and <a class="css" data-link-type="maybe" href="#valdef-display-ruby" id="ref-for-valdef-display-ruby③">ruby</a>,
	have a complex internal structure,
	with several different roles that their children and descendants can fill.
	This section defines those “<dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="layout-internal">layout-internal</dfn>” <a class="property" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display②⓪">display</a> values,
	which only have meaning within that particular layout mode.</p>
   <p>Unless otherwise specified,
	both the <a data-link-type="dfn" href="#inner-display-type" id="ref-for-inner-display-type⑤">inner display type</a> and the <a data-link-type="dfn" href="#outer-display-type" id="ref-for-outer-display-type⑥">outer display type</a> of elements using these <a class="property" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display②①">display</a> values
	are set to the given keyword.</p>
   <p>The <a class="production css" data-link-type="type" href="#typedef-display-internal" id="ref-for-typedef-display-internal②" title="Expands to: table-row-group | ruby-base-container | table-header-group | table-footer-group | table-column | ruby-text-container | ruby-base | ruby-text | table-row | table-caption | table-cell | table-column-group">&lt;display-internal></a> keywords are defined as follows:</p>
   <dl>
    <dt><dfn class="css" data-dfn-for="display, <display-internal>" data-dfn-type="value" data-export id="valdef-display-table-row-group">table-row-group<a class="self-link" href="#valdef-display-table-row-group"></a></dfn>, <dfn class="css" data-dfn-for="display, <display-internal>" data-dfn-type="value" data-export id="valdef-display-table-header-group">table-header-group<a class="self-link" href="#valdef-display-table-header-group"></a></dfn>, <dfn class="css" data-dfn-for="display, <display-internal>" data-dfn-type="value" data-export id="valdef-display-table-footer-group">table-footer-group<a class="self-link" href="#valdef-display-table-footer-group"></a></dfn>, <dfn class="dfn-paneled css" data-dfn-for="display, <display-internal>" data-dfn-type="value" data-export id="valdef-display-table-row">table-row</dfn>, <dfn class="dfn-paneled css" data-dfn-for="display, <display-internal>" data-dfn-type="value" data-export id="valdef-display-table-cell">table-cell</dfn>, <dfn class="css" data-dfn-for="display, <display-internal>" data-dfn-type="value" data-export id="valdef-display-table-column-group">table-column-group<a class="self-link" href="#valdef-display-table-column-group"></a></dfn>, <dfn class="css" data-dfn-for="display, <display-internal>" data-dfn-type="value" data-export id="valdef-display-table-column">table-column<a class="self-link" href="#valdef-display-table-column"></a></dfn> 
    <dd>
      The element is an <dfn class="dfn-paneled" data-dfn-for data-dfn-type="dfn" data-export id="internal-table-element">internal table element</dfn>.
			It generates the appropriate <dfn data-dfn-for data-dfn-type="dfn" data-export id="internal-table-box">internal table box<a class="self-link" href="#internal-table-box"></a></dfn> which participates in a <a data-link-type="dfn">table formatting context</a>.
			See <a href="https://www.w3.org/TR/CSS2/tables.html#table-display">CSS2§17.2</a> <a data-link-type="biblio" href="#biblio-css2">[CSS2]</a>. 
     <p><a class="css" data-link-type="maybe" href="#valdef-display-table-cell" id="ref-for-valdef-display-table-cell">table-cell</a> boxes have a <a class="css" data-link-type="maybe" href="#valdef-display-flow-root" id="ref-for-valdef-display-flow-root④">flow-root</a> <a data-link-type="dfn" href="#inner-display-type" id="ref-for-inner-display-type⑥">inner display type</a>.</p>
    <dt><dfn class="dfn-paneled css" data-dfn-for="display, <display-internal>" data-dfn-type="value" data-export id="valdef-display-table-caption">table-caption</dfn> 
    <dd>
      The element generates a <dfn data-dfn-for data-dfn-type="dfn" data-export id="table-caption-box">table caption box<a class="self-link" href="#table-caption-box"></a></dfn>,
			which is a <a data-link-type="dfn" href="#block-box" id="ref-for-block-box④">block box</a> with special behavior with respect to table and table wrapper boxes.
			See <a href="https://www.w3.org/TR/CSS2/tables.html#table-display">CSS2§17.2</a> <a data-link-type="biblio" href="#biblio-css2">[CSS2]</a>. 
     <p><a class="css" data-link-type="maybe" href="#valdef-display-table-caption" id="ref-for-valdef-display-table-caption">table-caption</a> boxes have a <a class="css" data-link-type="maybe" href="#valdef-display-flow-root" id="ref-for-valdef-display-flow-root⑤">flow-root</a> <a data-link-type="dfn" href="#inner-display-type" id="ref-for-inner-display-type⑦">inner display type</a>.</p>
    <dt>
    <dt><dfn class="dfn-paneled css" data-dfn-for="display, <display-internal>" data-dfn-type="value" data-export id="valdef-display-ruby-base">ruby-base</dfn>, <dfn class="dfn-paneled css" data-dfn-for="display, <display-internal>" data-dfn-type="value" data-export id="valdef-display-ruby-text">ruby-text</dfn>, <dfn class="css" data-dfn-for="display, <display-internal>" data-dfn-type="value" data-export id="valdef-display-ruby-base-container">ruby-base-container<a class="self-link" href="#valdef-display-ruby-base-container"></a></dfn>, <dfn class="css" data-dfn-for="display, <display-internal>" data-dfn-type="value" data-export id="valdef-display-ruby-text-container">ruby-text-container<a class="self-link" href="#valdef-display-ruby-text-container"></a></dfn> 
    <dd>
      The element is an <dfn data-dfn-for data-dfn-type="dfn" data-export id="internal-ruby-element">internal ruby element<a class="self-link" href="#internal-ruby-element"></a></dfn>.
			It generates the appropriate <dfn data-dfn-for data-dfn-type="dfn" data-export id="internal-ruby-box">internal ruby box<a class="self-link" href="#internal-ruby-box"></a></dfn> which participates in a <a data-link-type="dfn" href="https://drafts.csswg.org/css-ruby-1/#ruby-formatting-context" id="ref-for-ruby-formatting-context①">ruby formatting context</a>. <a data-link-type="biblio" href="#biblio-css3ruby">[CSS3RUBY]</a> 
     <p><a class="css" data-link-type="maybe" href="#valdef-display-ruby-base" id="ref-for-valdef-display-ruby-base">ruby-base</a> and <a class="css" data-link-type="maybe" href="#valdef-display-ruby-text" id="ref-for-valdef-display-ruby-text">ruby-text</a> have a <a class="css" data-link-type="maybe" href="#valdef-display-flow" id="ref-for-valdef-display-flow④">flow</a> <a data-link-type="dfn" href="#inner-display-type" id="ref-for-inner-display-type⑧">inner display type</a>.</p>
   </dl>
   <p>Boxes with layout-specific display types generate anonymous wrapper boxes around themselves
	when placed in an incompatible parent,
	as defined by their respective specifications.</p>
   <div class="example" id="example-d11b97c3">
    <a class="self-link" href="#example-d11b97c3"></a> For example, Table Layout requires that a <a class="css" data-link-type="maybe" href="#valdef-display-table-cell" id="ref-for-valdef-display-table-cell①">table-cell</a> box
		must have a <a class="css" data-link-type="maybe" href="#valdef-display-table-row" id="ref-for-valdef-display-table-row">table-row</a> parent box. 
    <p>If it is misparented, like so:</p>
<pre class="lang-markup highlight"><c- p>&lt;</c-><c- f>div</c-> <c- e>style</c-><c- o>=</c-><c- s>"display:block;"</c-><c- p>></c->
  <c- p>&lt;</c-><c- f>div</c-> <c- e>style</c-><c- o>=</c-><c- s>"display:table-cell"</c-><c- p>></c->...<c- p>&lt;/</c-><c- f>div</c-><c- p>></c->
<c- p>&lt;/</c-><c- f>div</c-><c- p>></c->
</pre>
    <p>It will generate wrapper boxes around itself,
		producing a structure like:</p>
<pre>block box
└anonymous table box
 └anonymous table-row-group box
  └anonymous table-row box
   └table-cell box
</pre>
    <p>Even if the parent is another <a data-link-type="dfn" href="#internal-table-element" id="ref-for-internal-table-element">internal table element</a>,
		if it’s not the <em>correct</em> one,
		wrapper boxes will be generated.
		For example, in the following markup:</p>
<pre class="lang-markup highlight"><c- p>&lt;</c-><c- f>div</c-> <c- e>style</c-><c- o>=</c-><c- s>"display:table;"</c-><c- p>></c->
  <c- p>&lt;</c-><c- f>div</c-> <c- e>style</c-><c- o>=</c-><c- s>"display:table-row"</c-><c- p>></c->
    <c- p>&lt;</c-><c- f>div</c-> <c- e>style</c-><c- o>=</c-><c- s>"display:table-cell"</c-><c- p>></c->...<c- p>&lt;/</c-><c- f>div</c-><c- p>></c->
  <c- p>&lt;/</c-><c- f>div</c-><c- p>></c->
<c- p>&lt;/</c-><c- f>div</c-><c- p>></c->
</pre>
    <p>Anonymous wrapper box generation will produce:</p>
<pre>table box
└anonymous table-row-group box
 └table-row box
  └table-cell box
</pre>
    <p>This "fix-up" ensures that table layout has a predictable structure to operate on.</p>
   </div>
   <h3 class="heading settled" data-level="2.5" id="box-generation"><span class="secno">2.5. </span><span class="content"> Box Generation: the <a class="css" data-link-type="maybe" href="#valdef-display-none" id="ref-for-valdef-display-none④">none</a> and <a class="css" data-link-type="maybe" href="#valdef-display-contents" id="ref-for-valdef-display-contents②">contents</a> keywords</span><a class="self-link" href="#box-generation"></a></h3>
   <p>While <a class="property" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display②②">display</a> can control the <em>types</em> of boxes an element will generate,
	it can also control whether an element will generate any boxes at all.</p>
   <p>The <a class="production css" data-link-type="type" href="#typedef-display-box" id="ref-for-typedef-display-box①" title="Expands to: none | contents">&lt;display-box></a> keywords are defined as follows:</p>
   <dl>
    <dt><dfn class="dfn-paneled css" data-dfn-for="display, <display-box>" data-dfn-type="value" data-export id="valdef-display-contents">contents</dfn> 
    <dd>
      The element itself does not generate any boxes,
			but its children and pseudo-elements still generate <a data-link-type="dfn" href="#box" id="ref-for-box⑨">boxes</a> and <a data-link-type="dfn" href="#text-run" id="ref-for-text-run⑥">text runs</a> as normal.
			For the purposes of box generation and layout,
			the element must be treated as if it had been replaced in the <a data-link-type="dfn" href="#element-tree" id="ref-for-element-tree①">element tree</a> by its contents
			(including both its source-document children and its pseudo-elements,
			such as <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-before" id="ref-for-selectordef-before">::before</a> and <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-after" id="ref-for-selectordef-after">::after</a> pseudo-elements,
			which are generated before/after the element’s children as normal). 
     <p class="note" role="note"><span>Note:</span> As only the box tree is affected,
			any semantics based on the document tree,
			such as selector-matching, event handling,
			and property <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#inheritance" id="ref-for-inheritance">inheritance</a>,
			are not affected. <strong>As of writing, however, <a href="https://github.com/w3c/csswg-drafts/issues/3040">this is not implemented correctly in major browsers</a>,
			so using this feature on the Web must be done with care
			as it can prevent accessibility tools
			from accessing the element’s semantics.</strong></p>
     <p>This value computes to <a class="css" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display②③">display: none</a> on replaced elements
			and other elements whose rendering is not entirely controlled by CSS;
			see <a href="#unbox">Appendix B: Effects of display: contents on Unusual Elements</a> for details.</p>
     <p class="note" role="note"><span>Note:</span> Replaced elements and form controls are treated specially
			because removing only the element’s own generating box
			is a more-or-less undefined operation.
			As this behavior may be refined if use cases
			(and more precise rendering models) develop,
			authors should use <a class="css" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display②④">display: none</a> rather than <span class="css" id="ref-for-propdef-display②⑤">display: contents</span> on such elements for forward-compatibility.</p>
    <dt><dfn class="dfn-paneled css" data-dfn-for="display, <display-box>" data-dfn-type="value" data-export id="valdef-display-none">none</dfn> 
    <dd>
      The <a data-link-type="dfn" href="#elements" id="ref-for-elements⑤">element</a> and its descendants generate no <a data-link-type="dfn" href="#box" id="ref-for-box①⓪">boxes</a> or <a data-link-type="dfn" href="#text-run" id="ref-for-text-run⑦">text runs</a>. 
     <p>Similarly, if a <a data-link-type="dfn" href="#text-nodes" id="ref-for-text-nodes④">text node</a> is defined to behave as <a class="css" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display②⑥">display: none</a>,
			it generates no <a data-link-type="dfn" href="#text-run" id="ref-for-text-run⑧">text runs</a>.</p>
   </dl>
   <p>Elements with either of these values do not have <a data-link-type="dfn" href="#inner-display-type" id="ref-for-inner-display-type⑨">inner</a> or <a data-link-type="dfn" href="#outer-display-type" id="ref-for-outer-display-type⑦">outer display types</a>,
	because they don’t generate any boxes at all.</p>
   <p class="note" role="note"><span>Note:</span> As these values cause affected elements to not generate a box,
	anonymous box generation rules will ignore the elided elements entirely,
	as if they did not exist in the box tree.</p>
   <p>Markup-based relationships, however, are not affected by these values,
	as they are solely rendering-time effects. <span class="non-normative"> For example,
		although they may affect which table cell <em>appears</em> in a column,
		they do not affect which table cell is associated with a particular column <em>element</em>.
		Similarly, they cannot affect which HTML <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/interactive-elements.html#the-summary-element" id="ref-for-the-summary-element">summary</a></code> element is associated with a particular table
		or whether a <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/form-elements.html#the-legend-element" id="ref-for-the-legend-element">legend</a></code> is considered to be labelling the contents of a particular <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/form-elements.html#the-fieldset-element" id="ref-for-the-fieldset-element">fieldset</a></code>. </span></p>
   <h3 class="heading settled" data-level="2.6" id="legacy-display"><span class="secno">2.6. </span><span class="content"> Precomposed Inline-level Display Values</span><a class="self-link" href="#legacy-display"></a></h3>
   <p>CSS level 2 used a single-keyword syntax for <a class="property" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display②⑦">display</a>,
	requiring separate keywords for block-level and inline-level variants of the same layout mode.
	These <a class="production css" data-link-type="type" href="#typedef-display-legacy" id="ref-for-typedef-display-legacy①" title="Expands to: inline-table | inline-grid | inline-flex | inline-block">&lt;display-legacy></a> keywords map as follows:</p>
   <dl>
    <dt><dfn class="dfn-paneled css" data-dfn-for="display, <display-legacy>" data-dfn-type="value" data-export id="valdef-display-inline-block">inline-block</dfn> 
    <dd> Behaves as <span class="css">inline flow-root</span>. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="display, <display-legacy>" data-dfn-type="value" data-export id="valdef-display-inline-table">inline-table</dfn> 
    <dd> Behaves as <span class="css">inline table</span>. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="display, <display-legacy>" data-dfn-type="value" data-export id="valdef-display-inline-flex">inline-flex</dfn> 
    <dd> Behaves as <span class="css">inline flex</span>. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="display, <display-legacy>" data-dfn-type="value" data-export id="valdef-display-inline-grid">inline-grid</dfn> 
    <dd> Behaves as <span class="css">inline grid</span>. 
   </dl>
   <h3 class="heading settled" data-level="2.7" id="transformations"><span class="secno">2.7. </span><span class="content"> Automatic Box Type Transformations</span><a class="self-link" href="#transformations"></a></h3>
   <p>Some layout effects require <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="blockify|blockification" id="blockify">blockification</dfn> or <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="inlinify|inlinification" id="inlinify">inlinification</dfn> of the box type,
	which sets the box’s <a data-link-type="dfn" href="#outer-display-type" id="ref-for-outer-display-type⑧">outer display type</a> to <a class="css" data-link-type="maybe" href="#valdef-display-block" id="ref-for-valdef-display-block⑤">block</a> or <a class="css" data-link-type="maybe" href="#valdef-display-inline" id="ref-for-valdef-display-inline⑤">inline</a> (respectively).
	(This has no effect on <a data-link-type="dfn" href="#display-type" id="ref-for-display-type②">display types</a> that generate no box at all,
	such as <a class="css" data-link-type="maybe" href="#valdef-display-none" id="ref-for-valdef-display-none⑤">none</a> or <a class="css" data-link-type="maybe" href="#valdef-display-contents" id="ref-for-valdef-display-contents③">contents</a>.)
	Additionally:</p>
   <ul>
    <li data-md>
     <p>If a <span class="css">block flow</span> box is <a data-link-type="dfn" href="#inlinify" id="ref-for-inlinify">inlinified</a>,
its <a data-link-type="dfn" href="#inner-display-type" id="ref-for-inner-display-type①⓪">inner display type</a> is set to <a class="css" data-link-type="maybe" href="#valdef-display-flow-root" id="ref-for-valdef-display-flow-root⑥">flow-root</a> so that it remains a block container.</p>
    <li data-md>
     <p>If an <span class="css">inline flow</span> box is <a data-link-type="dfn" href="#inlinify" id="ref-for-inlinify①">inlinified</a>,
it recursively <span id="ref-for-inlinify②">inlinifies</span> all of its in-flow children,
so that no block-level descendants
break up the inline formatting context in which it participates.</p>
    <li data-md>
     <p>For legacy reasons,
if an <span class="css">inline flow-root</span> box
(aka <a class="css" data-link-type="maybe" href="#valdef-display-inline-block" id="ref-for-valdef-display-inline-block①">inline-block</a>)
is <a data-link-type="dfn" href="#blockify" id="ref-for-blockify">blockified</a>,
it becomes a <a class="css" data-link-type="maybe" href="#valdef-display-block" id="ref-for-valdef-display-block⑥">block</a> box
(losing its <a class="css" data-link-type="maybe" href="#valdef-display-flow-root" id="ref-for-valdef-display-flow-root⑦">flow-root</a> nature).
For consistency,
a <span class="css">run-in flow-root</span> box
also <span id="ref-for-blockify①">blockifies</span> to a <span class="css" id="ref-for-valdef-display-block⑦">block</span> box.</p>
    <li data-md>
     <p>If a <a data-link-type="dfn" href="#layout-internal" id="ref-for-layout-internal">layout-internal</a> box is <a data-link-type="dfn" href="#blockify" id="ref-for-blockify②">blockified</a>,
its <a data-link-type="dfn" href="#inner-display-type" id="ref-for-inner-display-type①①">inner display type</a> converts to <a class="css" data-link-type="maybe" href="#valdef-display-flow" id="ref-for-valdef-display-flow⑤">flow</a> so that it becomes a <a data-link-type="dfn" href="#block-container" id="ref-for-block-container⑥">block container</a>. <a data-link-type="dfn" href="#inlinify" id="ref-for-inlinify③">Inlinification</a> has no effect on <span id="ref-for-layout-internal①">layout-internal</span> boxes.
(However, placement in such an inline context
will typically cause them to be wrapped
in an appropriately-typed anonymous inline-level box.)</p>
   </ul>
   <p class="note" role="note"><span>Note:</span> There are two methods used to fix up box types when a box is mismatched to its context.
	One is transformation of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#computed-value" id="ref-for-computed-value①">computed value</a> of <a class="property" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display②⑧">display</a>, such as <a data-link-type="dfn" href="#blockify" id="ref-for-blockify③">blockification</a> and <a data-link-type="dfn" href="#inlinify" id="ref-for-inlinify④">inlinification</a> described here.
	The other, taking place during <a href="#intro">box tree construction</a> (after computed values have been determined),
	is the creation of intermediary anonymous boxes,
	such as happens in <a href="https://www.w3.org/TR/CSS2/tables.html#anonymous-boxes">tables</a>, <a href="https://www.w3.org/TR/css-ruby-1/#box-fixup">ruby</a>,
	and <a href="https://www.w3.org/TR/CSS21/visuren.html#box-gen">flow</a> layout.</p>
   <div class="example" id="example-fbd6ceca">
    <a class="self-link" href="#example-fbd6ceca"></a> Some examples of computed-value fixup include: 
    <ul>
     <li>Absolute positioning or floating an element <a data-link-type="dfn" href="#blockify" id="ref-for-blockify④">blockifies</a> the box’s display type. <a data-link-type="biblio" href="#biblio-css2">[CSS2]</a> 
     <li>Containment in a <a data-link-type="dfn" href="https://drafts.csswg.org/css-ruby-1/#ruby-container" id="ref-for-ruby-container③">ruby container</a> <a data-link-type="dfn" href="#inlinify" id="ref-for-inlinify⑤">inlinifies</a> the box’s display type, as described in <a data-link-type="biblio" href="#biblio-css3ruby">[CSS3RUBY]</a>. 
     <li>A parent with a <a class="css" data-link-type="maybe" href="#valdef-display-grid" id="ref-for-valdef-display-grid②">grid</a> or <a class="css" data-link-type="maybe" href="#valdef-display-flex" id="ref-for-valdef-display-flex②">flex</a> <a class="property" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display②⑨">display</a> value <a data-link-type="dfn" href="#blockify" id="ref-for-blockify⑤">blockifies</a> the box’s display type. <a data-link-type="biblio" href="#biblio-css3-grid-layout">[CSS3-GRID-LAYOUT]</a> <a data-link-type="biblio" href="#biblio-css3-flexbox">[CSS3-FLEXBOX]</a> 
    </ul>
   </div>
   <p>The root element’s display type is always <a data-link-type="dfn" href="#blockify" id="ref-for-blockify⑥">blockified</a>.
	Additionally, a <a class="property" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display③⓪">display</a> of <a class="css" data-link-type="maybe" href="#valdef-display-contents" id="ref-for-valdef-display-contents④">contents</a> computes to <a class="css" data-link-type="maybe" href="#valdef-display-block" id="ref-for-valdef-display-block⑧">block</a> on the root element.</p>
   <h2 class="heading settled" data-level="3" id="run-in-layout"><span class="secno">3. </span><span class="content"> Run-In Layout</span><a class="self-link" href="#run-in-layout"></a></h2>
   <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="run-in | run-in box" id="run-in">run-in box</dfn> is a box that <em>merges into</em> a block that comes after it,
	inserting itself at the beginning of that block’s inline-level content.
	This is useful for formatting compact headlines, definitions, and other similar things,
	where the appropriate DOM structure is to have a headline preceding the following prose,
	but the desired display is an inline headline laying out with the text.</p>
   <div class="example" id="example-8e61beaa">
    <a class="self-link" href="#example-8e61beaa"></a> For example, dictionary definitions are often formatted so that the word is inline with the definition: 
<pre>&lt;dl class='dict'>
  &lt;dt>dictionary
  &lt;dd>a book that lists the words of a language in alphabetical
      order and gives their meaning, or that gives the equivalent
      words in a different language.
  &lt;dt>glossary
  &lt;dd>an alphabetical list of terms or words found in or relating
      to a specific subject, text, or dialect, with explanations; a
      brief dictionary.
&lt;/dl>
&lt;style>
.dict > dt {
  display: run-in;
}
.dict > dt::after {
  content: ": "
}
&lt;/style>
</pre>
    <p>Which is formatted as:</p>
<pre><b>dictionary:</b> a book that lists the words of a language
in alphabetical order and explains their meaning.

<b>glossary:</b> an alphabetical list of terms or words found
in or relating to a specific subject, text, or dialect,
with explanations; a brief dictionary.
</pre>
   </div>
   <p>A <a data-link-type="dfn" href="#run-in" id="ref-for-run-in②">run-in box</a> behaves exactly as any other <a data-link-type="dfn" href="#inline-level-box" id="ref-for-inline-level-box①">inline-level box</a>, except:</p>
   <ul>
    <li> A <a data-link-type="dfn" href="#run-in" id="ref-for-run-in③">run-in box</a> with a <a class="css" data-link-type="maybe" href="#valdef-display-flow" id="ref-for-valdef-display-flow⑥">flow</a> <a data-link-type="dfn" href="#inner-display-type" id="ref-for-inner-display-type①②">inner display type</a> <a data-link-type="dfn" href="#inlinify" id="ref-for-inlinify⑥">inlinifies</a> its contents. 
    <li>
      If a <a data-link-type="dfn" href="#run-in-sequence" id="ref-for-run-in-sequence">run-in sequence</a> is immediately followed by a block box
			that does not establish a new <a data-link-type="dfn" href="#block-formatting-context" id="ref-for-block-formatting-context⑥">block formatting context</a>,
			it is inserted as direct children of that block box:
			after its <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-marker" id="ref-for-selectordef-marker②">::marker</a> pseudo-element’s boxes (if any),
			but preceding any other boxes generated by the contents of the block
			(including the box generated by the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-before" id="ref-for-selectordef-before①">::before</a> pseudo-element, if any).
			This re-parenting recurses if possible
			(so that the run-in effectively becomes
			part of the deepest subsequent “paragraph” in its formatting context,
			collecting newly-adjacent run-ins as it goes). 
     <p>The reparented content is then formatted as if originally parented there. <span class="note">Note that only layout is affected, not inheritance,
			because property inheritance for non-anonymous boxes is based only on the element tree.</span></p>
    <li> Otherwise
			(if the <a data-link-type="dfn" href="#run-in-sequence" id="ref-for-run-in-sequence①">run-in sequence</a> is <em>not</em> followed by such a block),
			an anonymous block box is generated around the <span id="ref-for-run-in-sequence②">run-in sequence</span> and all immediately following inline-level content
			(up to, but not including, the next <span id="ref-for-run-in-sequence③">run-in sequence</span>, if any). 
   </ul>
   <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="run-in-sequence">run-in sequence</dfn> is a maximal sequence of consecutive sibling <a data-link-type="dfn" href="#run-in" id="ref-for-run-in④">run-in boxes</a> and intervening <a data-link-type="dfn" href="https://drafts.csswg.org/css-text-3/#white-space" id="ref-for-white-space">white space</a> and/or out-of-flow boxes.</p>
   <p class="note" role="note"><span>Note:</span> This statement implies that out-of-flow boxes are reparented
	if they are between two run-in boxes.
	Another alternative would be to leave behind the intervening out-of-flow boxes,
	or to have out-of-flow boxes impede the running-in of earlier boxes.
	Implementers and authors are encouraged to contact the CSSWG if they have a preferred behavior, as this one was picked somewhat at random.</p>
   <p>This fixup occurs before the anonymous block and inline box fixup described in <a href="https://www.w3.org/TR/CSS21/visuren.html#box-gen">CSS2§9.2</a>,
	and affects the determination of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-pseudo-4/#first-formatted-line" id="ref-for-first-formatted-line">first formatted line</a> of the affected elements
	as if the <a data-link-type="dfn" href="#run-in-sequence" id="ref-for-run-in-sequence④">run-in sequence</a> were originally
	in its final location in the box tree.</p>
   <p class="note" role="note"><span>Note:</span> As the earliest run-in represents the first text on the <a data-link-type="dfn" href="https://drafts.csswg.org/css-pseudo-4/#first-formatted-line" id="ref-for-first-formatted-line①">first formatted line</a> of its containing block,
	a <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-first-letter" id="ref-for-selectordef-first-letter①">::first-letter</a> pseudo-element applied to that block element
	selects the first letter of the run-in,
	rather than the first letter of its own contents.</p>
   <p class="note" role="note"><span>Note:</span> This run-in model is slightly different from the one proposed in earlier revisions of <a data-link-type="biblio" href="#biblio-css2">[CSS2]</a>.</p>
   <h2 class="no-num heading settled" id="glossary"><span class="content"> Appendix A: Glossary</span><a class="self-link" href="#glossary"></a></h2>
   <p>The following terms are defined here for convenience:</p>
   <dl>
    <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="principal-box">principal box</dfn> 
    <dd>
      When an <a data-link-type="dfn" href="#elements" id="ref-for-elements⑥">element</a> generates one or more <a data-link-type="dfn" href="#box" id="ref-for-box①①">boxes</a>,
			one of them is the <a data-link-type="dfn" href="#principal-box" id="ref-for-principal-box⑧">principal box</a>,
			which contains its descendant boxes and generated content,
			and is also the box involved in any positioning scheme. 
     <p>Some elements may generate additional boxes in addition to the principal box
			(such as <a class="css" data-link-type="maybe" href="#valdef-display-list-item" id="ref-for-valdef-display-list-item③">list-item</a> elements,
			which generate an additional marker box,
			or <a class="css" data-link-type="maybe" href="#valdef-display-table" id="ref-for-valdef-display-table③">table</a> elements,
			which generate a <a data-link-type="dfn" href="#principal-box" id="ref-for-principal-box⑨">principal</a> <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-wrapper-box" id="ref-for-table-wrapper-box④">table wrapper box</a> and an additional <a data-link-type="dfn" href="https://drafts.csswg.org/css-tables-3/#table-grid-box" id="ref-for-table-grid-box④">table grid box</a>).
			These additional boxes are placed with respect to the principal box.</p>
    <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="inline-level|inline-level content" id="inline-level">inline-level</dfn> 
    <dd> Content that participates in inline layout.
			Specifically, inline-level boxes and <a data-link-type="dfn" href="#text-run" id="ref-for-text-run⑨">text runs</a>. 
    <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="block-level|block-level content" id="block-level">block-level</dfn> 
    <dd> Content that participates in block layout.
			Specifically, block-level boxes. 
    <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="inline-box">inline box</dfn> 
    <dd> A non-replaced <a data-link-type="dfn" href="#inline-level" id="ref-for-inline-level⑤">inline-level</a> box whose <a data-link-type="dfn" href="#inner-display-type" id="ref-for-inner-display-type①③">inner display type</a> is <a class="css" data-link-type="maybe" href="#valdef-display-flow" id="ref-for-valdef-display-flow⑦">flow</a>.
			The contents of an inline box participate in the same inline formatting context as the inline box itself. 
    <dt><dfn data-dfn-type="dfn" data-export id="inline">inline<a class="self-link" href="#inline"></a></dfn> 
    <dd> Used as a shorthand for <a data-link-type="dfn" href="#inline-box" id="ref-for-inline-box⑤">inline box</a> or <a data-link-type="dfn" href="#inline-level-box" id="ref-for-inline-level-box②">inline-level box</a> where unambiguous,
			or as an adjective meaning <a data-link-type="dfn" href="#inline-level" id="ref-for-inline-level⑥">inline-level</a>.
			The latter usage is deprecated. 
    <dt><dfn data-dfn-type="dfn" data-export data-lt="atomic inline|atomic inline box" id="atomic-inline">atomic inline<a class="self-link" href="#atomic-inline"></a></dfn> 
    <dd>
      An inline-level box that is replaced (such as an image)
			or that establishes a new formatting context (such as an <a class="css" data-link-type="maybe" href="#valdef-display-inline-block" id="ref-for-valdef-display-inline-block②">inline-block</a> or <a class="css" data-link-type="maybe" href="#valdef-display-inline-table" id="ref-for-valdef-display-inline-table①">inline-table</a>)
			and cannot split across lines
			(as <a data-link-type="dfn" href="#inline-box" id="ref-for-inline-box⑥">inline boxes</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-ruby-1/#ruby-container" id="ref-for-ruby-container④">ruby containers</a> can). 
     <p>Any inline-level box whose <a data-link-type="dfn" href="#inner-display-type" id="ref-for-inner-display-type①④">inner display type</a> is not <a class="css" data-link-type="maybe" href="#valdef-display-flow" id="ref-for-valdef-display-flow⑧">flow</a> establishes a new formatting context of the specified <span id="ref-for-inner-display-type①⑤">inner display type</span>.</p>
    <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="block container|block container box" id="block-container">block container</dfn> 
    <dd>
      A block container either contains only inline-level boxes
			participating in an <a data-link-type="dfn" href="#inline-formatting-context" id="ref-for-inline-formatting-context①">inline formatting context</a>,
			or contains only block-level boxes
			participating in a <a data-link-type="dfn" href="#block-formatting-context" id="ref-for-block-formatting-context⑦">block formatting context</a> (possibly generating anonymous block boxes to ensure this constraint,
			as defined in <a href="https://www.w3.org/TR/CSS2/visuren.html#anonymous-block-level">CSS2§9.2.1.1</a>). 
     <p>A block container that contains only inline-level content
			establishes a new <a data-link-type="dfn" href="#inline-formatting-context" id="ref-for-inline-formatting-context②">inline formatting context</a>.
			The element then also generates a <a data-link-type="dfn" href="https://drafts.csswg.org/css-inline-3/#root-inline-box" id="ref-for-root-inline-box">root inline box</a> which wraps all of its inline content. <span class="note">Note, this <a data-link-type="dfn" href="https://drafts.csswg.org/css-inline-3/#root-inline-box" id="ref-for-root-inline-box①">root inline box</a> concept
			effectively replaces the "anonymous inline element" concept
			introduced in <a href="https://www.w3.org/TR/CSS2/visuren.html#anonymous">CSS2§9.2.2.1</a>.</span></p>
     <p>A block container establishes a new <a data-link-type="dfn" href="#block-formatting-context" id="ref-for-block-formatting-context⑧">block formatting context</a> if its parent formatting context is <em>not</em> a <span id="ref-for-block-formatting-context⑨">block formatting context</span>;
			otherwise, when participating in a <span id="ref-for-block-formatting-context①⓪">block formatting context</span> itself,
			it either establishes a new <span id="ref-for-block-formatting-context①①">block formatting context</span> for its contents
			or continues the one in which it participates,
			as determined by the constraints of other properties
			(such as <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visufx.html#propdef-overflow" id="ref-for-propdef-overflow①">overflow</a> or <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-align-3/#propdef-align-content" id="ref-for-propdef-align-content">align-content</a>).</p>
     <p class="note" role="note"><span>Note:</span> A block container box can both establish a block formatting context <em>and</em> an inline formatting context simultaneously.</p>
    <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="block-box">block box</dfn> 
    <dd>
      A <a data-link-type="dfn" href="#block-level-box" id="ref-for-block-level-box">block-level box</a> that is also a <a data-link-type="dfn" href="#block-container" id="ref-for-block-container⑦">block container</a>. 
     <p class="note" role="note"><span>Note:</span> Not all <a data-link-type="dfn" href="#block-container" id="ref-for-block-container⑧">block container</a> boxes are <a data-link-type="dfn" href="#block-level" id="ref-for-block-level⑤">block-level</a> boxes:
			non-replaced inline blocks and non-replaced table cells,
			for example, are block containers
			but not block-level boxes.
			Similarly, not all block-level boxes are block containers:
			block-level replaced elements (<a class="css" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display③①">display: block</a>)
			and flex containers (<span class="css" id="ref-for-propdef-display③②">display: flex</span>), for example,
			are not block containers.</p>
    <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="block">block</dfn> 
    <dd> Used as a shorthand for <a data-link-type="dfn" href="#block-box" id="ref-for-block-box⑤">block box</a>, <a data-link-type="dfn" href="#block-level-box" id="ref-for-block-level-box①">block-level box</a>, or <a data-link-type="dfn" href="#block-container" id="ref-for-block-container⑨">block container box</a>,
			where unambiguous. 
    <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="replaced element|replaced" id="replaced-element">replaced element</dfn> 
    <dd>
      An element whose content is outside the scope of the CSS formatting model,
			such as an image or embedded document. <span class="non-normative"> For example, the content of the HTML <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element" id="ref-for-the-img-element">img</a></code> element
				is often replaced by the image that its <code><a data-link-type="element-sub" href="https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-src" id="ref-for-attr-img-src">src</a></code> attribute designates. </span> Replaced elements often have intrinsic dimensions:
			an intrinsic width, an intrinsic height, and an intrinsic ratio.
			For example, a bitmap image has an intrinsic width and an intrinsic height specified in absolute units
			(from which the intrinsic ratio can obviously be determined).
			On the other hand, other documents may not have any intrinsic dimensions
			(for example, a blank HTML document). 
     <p>User agents may consider a replaced element to not have any intrinsic dimensions
			if it is believed that those dimensions could leak sensitive information to a third party.
			For example, if an HTML document changed intrinsic size depending on the user’s bank balance,
			then the UA might want to act as if that resource had no intrinsic dimensions.</p>
     <p>The content of replaced elements is not considered in the CSS formatting model;
			however, their intrinsic dimensions are used in various layout calculations.</p>
     <p>A <dfn data-dfn-type="dfn" data-export id="non-replaced">non-replaced<a class="self-link" href="#non-replaced"></a></dfn> element is one that is not <a data-link-type="dfn" href="#replaced-element" id="ref-for-replaced-element③">replaced</a>,
			i.e. whose rendering is dictated by the CSS model.</p>
    <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="containing-block">containing block</dfn> 
    <dd> A rectangle that forms the basis of sizing and positioning
			for the boxes associated with it
			(usually the children of the box that generated it).
			Notably, a containing block is <em>not a box</em> (it is a rectangle),
			however it is often derived from the dimensions of a box.
			If properties of a containing block are referenced,
			they reference the values on the box that generated the containing block.
			(For the <a data-link-type="dfn" href="#initial-containing-block" id="ref-for-initial-containing-block">initial containing block</a>,
			values are taken from the root element
			unless otherwise specified.)
			See <a data-link-type="biblio" href="#biblio-css2">[CSS2]</a> <a href="https://www.w3.org/TR/CSS2/visuren.html#containing-block">Section 9.1.2</a> and <a href="https://www.w3.org/TR/CSS2/visudet.html#containing-block-details">Section 10.1</a> for details. 
    <dt><dfn data-dfn-type="dfn" data-export id="containing-block-chain">containing block chain<a class="self-link" href="#containing-block-chain"></a></dfn> 
    <dd> A sequence of successive <a data-link-type="dfn" href="#containing-block" id="ref-for-containing-block">containing blocks</a> that form an ancestor-descendant chain
			through the <span id="ref-for-containing-block①">containing block</span> relation.
			For example, an <a data-link-type="dfn" href="#inline-box" id="ref-for-inline-box⑦">inline box</a>’s containing block is the content box of its closest <a data-link-type="dfn" href="#block-container" id="ref-for-block-container①⓪">block container</a> ancestor;
			if that block container is an in-flow <a data-link-type="dfn" href="#block" id="ref-for-block">block</a>,
			then <em>its</em> containing block is formed by its parent <span id="ref-for-block-container①①">block container</span>;
			if that grandparent <span id="ref-for-block-container①②">block container</span> is <a data-link-type="dfn" href="#absolutely-positioned" id="ref-for-absolutely-positioned">absolutely positioned</a>,
			then <em>its</em> containing block is the padding edges of its closest <em>positioned</em> ancestor (not necessarily its parent),
			and so on up to the <a data-link-type="dfn" href="#initial-containing-block" id="ref-for-initial-containing-block①">initial containing block</a>. 
    <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="initial-containing-block">initial containing block</dfn> 
    <dd> The <a data-link-type="dfn" href="#containing-block" id="ref-for-containing-block②">containing block</a> of the root element.
			See <a href="https://www.w3.org/TR/CSS2/visudet.html#containing-block-details">CSS2.1§10.1</a> for continuous media;
			and <a data-link-type="biblio" href="#biblio-css3page">[CSS3PAGE]</a> for paged media. 
    <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="formatting-context">formatting context</dfn> 
    <dd>
      A <a data-link-type="dfn" href="#formatting-context" id="ref-for-formatting-context④">formatting context</a> is the environment
			into which a set of related boxes are laid out.
			Different <span id="ref-for-formatting-context⑤">formatting contexts</span> lay out their boxes
			according to different rules.
			For example, a <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-formatting-context" id="ref-for-flex-formatting-context①">flex formatting context</a> lays out boxes according to the <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-layout" id="ref-for-flex-layout">flex layout</a> rules <a data-link-type="biblio" href="#biblio-css3-flexbox">[CSS3-FLEXBOX]</a>,
			whereas a <a data-link-type="dfn" href="#block-formatting-context" id="ref-for-block-formatting-context①②">block formatting context</a> lays out boxes according to the block-and-inline layout rules <a data-link-type="biblio" href="#biblio-css2">[CSS2]</a>.
			Additionally, some types of <span id="ref-for-formatting-context⑥">formatting contexts</span> interleave and co-exist:
			for example, an <a data-link-type="dfn" href="#inline-formatting-context" id="ref-for-inline-formatting-context③">inline formatting context</a> exists within
			and interacts with the <span id="ref-for-block-formatting-context①③">block formatting context</span> of the element that establishes it,
			and a <a data-link-type="dfn" href="https://drafts.csswg.org/css-ruby-1/#ruby-container" id="ref-for-ruby-container⑤">ruby container</a> overlays a <a data-link-type="dfn" href="https://drafts.csswg.org/css-ruby-1/#ruby-formatting-context" id="ref-for-ruby-formatting-context②">ruby formatting context</a> over the <span id="ref-for-inline-formatting-context④">inline formatting context</span> in which its <a data-link-type="dfn" href="https://drafts.csswg.org/css-ruby-1/#ruby-base-container-box" id="ref-for-ruby-base-container-box">ruby base container</a> participates. 
     <p>A box either establishes a new <a data-link-type="dfn" href="#independent-formatting-context" id="ref-for-independent-formatting-context">independent formatting context</a> or continues the <a data-link-type="dfn" href="#formatting-context" id="ref-for-formatting-context⑦">formatting context</a> of its containing block.
			In some cases,
			it might additionally establish a new (non-independent) co-existing formatting context.
			Unless otherwise specified, however,
			establishing a new <span id="ref-for-formatting-context⑧">formatting context</span> creates an <span id="ref-for-independent-formatting-context①">independent formatting context</span>.
			The type of formatting context established by the box
			is determined by its <a data-link-type="dfn" href="#inner-display-type" id="ref-for-inner-display-type①⑥">inner display type</a>.
			E.g. a <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-container" id="ref-for-grid-container③">grid container</a> establishes a new <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-formatting-context" id="ref-for-grid-formatting-context①">grid formatting context</a>,
			a <a data-link-type="dfn" href="https://drafts.csswg.org/css-ruby-1/#ruby-container" id="ref-for-ruby-container⑥">ruby container</a> establishes a new <a data-link-type="dfn" href="https://drafts.csswg.org/css-ruby-1/#ruby-formatting-context" id="ref-for-ruby-formatting-context③">ruby formatting context</a>,
			and a <a data-link-type="dfn" href="#block-container" id="ref-for-block-container①③">block container</a> can establish a new <a data-link-type="dfn" href="#block-formatting-context" id="ref-for-block-formatting-context①④">block formatting context</a> and/or a new <a data-link-type="dfn" href="#inline-formatting-context" id="ref-for-inline-formatting-context⑤">inline formatting context</a>.
			See the <a class="property" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display③③">display</a> property.</p>
    <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="independent-formatting-context">independent formatting context</dfn> 
    <dd>
      When a box establishes an independent formatting context
			(whether that <a data-link-type="dfn" href="#formatting-context" id="ref-for-formatting-context⑨">formatting context</a> is of the same type as its parent or not),
			it essentially creates a new, independent layout environment:
			except through the sizing of the box itself,
			the layout of its descendants is (generally)
			not affected by the the rules and contents of
			the <span id="ref-for-formatting-context①⓪">formatting context</span> outside the box, and vice versa. 
     <p class="example" id="example-7e2994e7"><a class="self-link" href="#example-7e2994e7"></a> For example, in a <a data-link-type="dfn" href="#block-formatting-context" id="ref-for-block-formatting-context①⑤">block formatting context</a>,
				floated boxes affect the layout of surrounding boxes.
				But their effects do not escape their <a data-link-type="dfn" href="#formatting-context" id="ref-for-formatting-context①①">formatting context</a>:
				the box establishing their <span id="ref-for-formatting-context①②">formatting context</span> grows to fully contain them,
				and floats from outside that box
				are not allowed to protrude into and affect the contents
				inside the box. </p>
     <p class="example" id="example-bb8209a6"><a class="self-link" href="#example-bb8209a6"></a> As another example, margins do not collapse across <a data-link-type="dfn" href="#formatting-context" id="ref-for-formatting-context①③">formatting context</a> boundaries. </p>
     <p class="note" role="note"> Exclusions are able to affect content across <a data-link-type="dfn" href="#independent-formatting-context" id="ref-for-independent-formatting-context②">independent formatting context</a> boundaries.
				(At time of writing, they are the only layout feature that can.) <a data-link-type="biblio" href="#biblio-css3-exclusions">[CSS3-EXCLUSIONS]</a> </p>
     <p>Certain properties can force a box to <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="establish an independent formatting context|
			         establishes an independent formatting context|
			         establishing an independent formatting context|
			         established an independent formatting context" id="establish-an-independent-formatting-context"> establish an independent formatting context</dfn> in cases where it wouldn’t ordinarily.
			For example,
			making a box <a data-link-type="dfn" href="#out-of-flow" id="ref-for-out-of-flow">out-of-flow</a> causes it to <a data-link-type="dfn" href="#blockify" id="ref-for-blockify⑦">blockify</a> as well as to <a data-link-type="dfn" href="#establish-an-independent-formatting-context" id="ref-for-establish-an-independent-formatting-context">establish an independent formatting context</a>.
			As another example,
			certain values of the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-contain-1/#propdef-contain" id="ref-for-propdef-contain">contain</a> property
			can cause a box to <span id="ref-for-establish-an-independent-formatting-context①">establish an independent formatting context</span>.
			Turning a block into a <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scroll-container" id="ref-for-scroll-container">scroll container</a> will cause it to <span id="ref-for-establish-an-independent-formatting-context②">establish an independent formatting context</span>;
			however turning a <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#subgrid" id="ref-for-subgrid">subgrid</a> into a <span id="ref-for-scroll-container①">scroll container</span> will not—<wbr>it continues to act as a subgrid,
			with its contents participating in the layout of its parent <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-1/#grid-container" id="ref-for-grid-container④">grid container</a>.</p>
     <p>A <a data-link-type="dfn" href="#block-box" id="ref-for-block-box⑥">block box</a> that <a data-link-type="dfn" href="#establish-an-independent-formatting-context" id="ref-for-establish-an-independent-formatting-context③">establishes an independent formatting context</a> establishes a new <a data-link-type="dfn" href="#block-formatting-context" id="ref-for-block-formatting-context①⑥">block formatting context</a> for its contents.
			In most other cases,
			forcing a box to <span id="ref-for-establish-an-independent-formatting-context④">establish an independent formatting context</span> is a no-op—<wbr>either the box already establishes an <a data-link-type="dfn" href="#independent-formatting-context" id="ref-for-independent-formatting-context③">independent formatting context</a> (e.g. <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-container" id="ref-for-flex-container③">flex containers</a>),
			or it’s not possible to establish a totally independent new formatting context on that type of box
			(e.g. non-replaced <a data-link-type="dfn" href="#inline-box" id="ref-for-inline-box⑧">inline boxes</a>).</p>
    <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="block-formatting-context">block formatting context</dfn> 
    <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="inline-formatting-context">inline formatting context</dfn> 
    <dd> <a data-link-type="dfn" href="#block-formatting-context" id="ref-for-block-formatting-context①⑦">Block</a> and <a data-link-type="dfn" href="#inline-formatting-context" id="ref-for-inline-formatting-context⑥">inline formatting contexts</a> are defined in <a href="https://www.w3.org/TR/CSS2/visuren.html#normal-flow">CSS 2.1 Section 9.4</a>. <span id="ref-for-inline-formatting-context⑦">Inline formatting contexts</span> exist within
			(are part of their containing) <span id="ref-for-block-formatting-context①⑧">block formatting contexts</span>;
			for example, line boxes belonging to the <span id="ref-for-inline-formatting-context⑧">inline formatting context</span> interact with floats belonging to the <span id="ref-for-block-formatting-context①⑨">block formatting context</span>. 
    <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="block-formatting-context-root">block formatting context root</dfn> 
    <dd> A <a data-link-type="dfn" href="#block-container" id="ref-for-block-container①④">block container</a> that establishes a new <a data-link-type="dfn" href="#block-formatting-context" id="ref-for-block-formatting-context②⓪">block formatting context</a>. 
    <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="bfc">BFC</dfn> 
    <dd>
      Abbreviation for <a data-link-type="dfn" href="#block-formatting-context" id="ref-for-block-formatting-context②①">block formatting context</a> or <a data-link-type="dfn" href="#block-formatting-context-root" id="ref-for-block-formatting-context-root">block formatting context root</a>.
			Has various informal definitions referring to boxes which
			contain internal floats, exclude external floats, and suppress margin collapsing,
			and may therefore refer specifically to one of: 
     <ul>
      <li data-md>
       <p>a <a data-link-type="dfn" href="#block-container" id="ref-for-block-container①⑤">block container</a> that establishes a new <a data-link-type="dfn" href="#block-formatting-context" id="ref-for-block-formatting-context②②">block formatting context</a> for its contents</p>
      <li data-md>
       <p>a <a data-link-type="dfn" href="#block-box" id="ref-for-block-box⑦">block box</a> (i.e. a <a data-link-type="dfn" href="#block-level" id="ref-for-block-level⑥">block-level</a> block container)
that establishes a <a data-link-type="dfn" href="#block-formatting-context" id="ref-for-block-formatting-context②③">block formatting context</a> for its contents
(as distinguished from a block box which does not)</p>
      <li data-md>
       <p>(very loosely) any block-level box that establishes a new <a data-link-type="dfn" href="#formatting-context" id="ref-for-formatting-context①④">formatting context</a> (other than an inline formatting context)</p>
     </ul>
    <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="out-of-flow">out-of-flow</dfn> 
    <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="in-flow">in-flow</dfn> 
    <dd>
      A box is <a data-link-type="dfn" href="#out-of-flow" id="ref-for-out-of-flow①">out-of-flow</a> if it is floated (via <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visuren.html#propdef-float" id="ref-for-propdef-float①">float</a>)
			or absolutely-positioned (via <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-position" id="ref-for-propdef-position①">position</a>).
			A box is <a data-link-type="dfn" href="#in-flow" id="ref-for-in-flow">in-flow</a> if it is not <span id="ref-for-out-of-flow②">out-of-flow</span>. 
     <p class="note" role="note"><span>Note:</span> some <a data-link-type="dfn" href="#formatting-context" id="ref-for-formatting-context①⑤">formatting contexts</a> inhibit floating,
			so that an element with <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visuren.html#propdef-float" id="ref-for-propdef-float②">float: left</a> is not necessarily <a data-link-type="dfn" href="#out-of-flow" id="ref-for-out-of-flow③">out-of-flow</a>.</p>
    <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="absolutely positioned | absolutely positioned element | absolutely positioned box" id="absolutely-positioned">absolutely positioned</dfn> 
    <dd> A box is <a data-link-type="dfn" href="#absolutely-positioned" id="ref-for-absolutely-positioned①">absolutely positioned</a> if its <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-position" id="ref-for-propdef-position②">position</a> property is either <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-position-3/#valdef-position-absolute" id="ref-for-valdef-position-absolute">absolute</a> or <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-position-3/#valdef-position-fixed" id="ref-for-valdef-position-fixed">fixed</a>.
			Absolutely positioned boxes are also <a data-link-type="dfn" href="#out-of-flow" id="ref-for-out-of-flow④">out-of-flow</a>. 
    <dt><dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="document-order">document order</dfn> 
    <dd> The order in which boxes or content occurs in the document
			(which can be different from the order in which it appears for rendering).
			For the purpose of determining the relative order of pseudo-elements,
			the box-tree order is used,
			see <a href="https://www.w3.org/TR/css-pseudo-4/#treelike">CSS Pseudo-Elements 4 §4 Tree-Abiding Pseudo-elements</a>. 
   </dl>
   <p>See <a data-link-type="biblio" href="#biblio-css2">[CSS2]</a> <a href="https://www.w3.org/TR/CSS2/visuren.html">Chapter 9</a> for a fuller definition of these terms.</p>
   <h2 class="no-num non-normative heading settled" id="unbox"><span class="content"> Appendix B: Effects of <a class="css" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display③④">display: contents</a> on Unusual Elements</span><a class="self-link" href="#unbox"></a></h2>
   <p><em>This section is (currently) non-normative.</em></p>
   <p>Some elements aren’t rendered purely by CSS box concepts;
	for example, replaced elements (such as <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element" id="ref-for-the-img-element①">img</a></code>),
	many form controls (such as <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/input.html#the-input-element" id="ref-for-the-input-element">input</a></code>),
	and SVG elements.</p>
   <p>This appendix defines how they interact with <a class="css" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display③⑤">display: contents</a>.</p>
   <h3 class="heading settled" id="unbox-html"><span class="content">HTML Elements</span><a class="self-link" href="#unbox-html"></a></h3>
   <dl>
    <dt data-md><code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-br-element" id="ref-for-the-br-element">br</a></code>
    <dt data-md><code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-wbr-element" id="ref-for-the-wbr-element">wbr</a></code>
    <dt data-md><code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/form-elements.html#the-meter-element" id="ref-for-the-meter-element">meter</a></code>
    <dt data-md><code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/form-elements.html#the-progress-element" id="ref-for-the-progress-element">progress</a></code>
    <dt data-md><code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/canvas.html#canvas" id="ref-for-canvas">canvas</a></code>
    <dt data-md><code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-embed-element" id="ref-for-the-embed-element">embed</a></code>
    <dt data-md><code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-object-element" id="ref-for-the-object-element">object</a></code>
    <dt data-md><code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/media.html#audio" id="ref-for-audio">audio</a></code>
    <dt data-md><code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-iframe-element" id="ref-for-the-iframe-element">iframe</a></code>
    <dt data-md><code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element" id="ref-for-the-img-element②">img</a></code>
    <dt data-md><code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/media.html#video" id="ref-for-video">video</a></code>
    <dt data-md><code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/obsolete.html#frame" id="ref-for-frame">frame</a></code>
    <dt data-md><code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/obsolete.html#frameset" id="ref-for-frameset">frameset</a></code>
    <dt data-md><code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/input.html#the-input-element" id="ref-for-the-input-element①">input</a></code>
    <dt data-md><code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/form-elements.html#the-textarea-element" id="ref-for-the-textarea-element">textarea</a></code>
    <dt data-md><code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/form-elements.html#the-select-element" id="ref-for-the-select-element">select</a></code>
    <dd data-md>
     <p><a class="css" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display③⑥">display: contents</a> computes to <span class="css" id="ref-for-propdef-display③⑦">display: none</span>.</p>
    <dt data-md><code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/form-elements.html#the-legend-element" id="ref-for-the-legend-element①">legend</a></code>
    <dd data-md>
     <p>Per HTML, a <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/form-elements.html#the-legend-element" id="ref-for-the-legend-element②">legend</a></code> with <a class="css" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display③⑧">display: contents</a> is not a <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/rendering.html#rendered-legend" id="ref-for-rendered-legend">rendered legend</a>,
so it does not have magical display behavior.
(Thus, it reacts to <span class="css" id="ref-for-propdef-display③⑨">display: contents</span> normally.)</p>
    <dt data-md><code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/form-elements.html#the-button-element" id="ref-for-the-button-element">button</a></code>
    <dt data-md><code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/interactive-elements.html#the-details-element" id="ref-for-the-details-element">details</a></code>
    <dt data-md><code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/form-elements.html#the-fieldset-element" id="ref-for-the-fieldset-element①">fieldset</a></code>
    <dd data-md>
     <p>These elements don’t have any special behavior; <a class="css" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display④⓪">display: contents</a> simply removes their <a data-link-type="dfn" href="#principal-box" id="ref-for-principal-box①⓪">principal box</a>,
and their contents render as normal.</p>
    <dt data-md>any other HTML element
    <dd data-md>
     <p>Behaves as normal for <a class="css" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display④①">display: contents</a>.</p>
   </dl>
   <h3 class="heading settled" id="unbox-svg"><span class="content">SVG Elements</span><a class="self-link" href="#unbox-svg"></a></h3>
   <dl>
    <dt data-md>An <code><a data-link-type="element" href="https://svgwg.org/svg2-draft/struct.html#elementdef-svg" id="ref-for-elementdef-svg">svg</a></code> element that has CSS box layout
(this includes all <code><a data-link-type="element" href="https://svgwg.org/svg2-draft/struct.html#elementdef-svg" id="ref-for-elementdef-svg①">svg</a></code> whose parent is an HTML element,
as well as document root elements)
    <dd data-md>
     <p><a class="css" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display④②">display: contents</a> computes to <span class="css" id="ref-for-propdef-display④③">display: none</span>.</p>
    <dt data-md>All other SVG <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/struct.html#container-element" id="ref-for-container-element">container elements</a> that are also <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/render.html#TermRenderableElement" id="ref-for-TermRenderableElement">renderable elements</a>
    <dt data-md>SVG <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/text.html#TermTextContentChildElement" id="ref-for-TermTextContentChildElement">text content child elements</a>
    <dt data-md><code><a data-link-type="element" href="https://svgwg.org/svg2-draft/struct.html#elementdef-use" id="ref-for-elementdef-use">use</a></code>
    <dd data-md>
     <p><a class="css" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display④④">display: contents</a> strips the element from the formatting tree,
and hoists its contents up to display in its place.
These contents include the shadow-DOM content for <code><a data-link-type="element" href="https://svgwg.org/svg2-draft/struct.html#elementdef-use" id="ref-for-elementdef-use①">use</a></code>.</p>
    <dt data-md>any other SVG elements
    <dd data-md>
     <p><a class="css" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display④⑤">display: contents</a> computes to <span class="css" id="ref-for-propdef-display④⑥">display: none</span>.</p>
   </dl>
   <div class="note" role="note">
     The intention here is that
		the <a class="css" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display④⑦">display: none</a> behavior applies
		whenever the "rendering context" inside the element
		is different than the context outside of it.
		If the element’s child elements would not be valid children
		of the element’s parent,
		you cannot simply hoist them up the formatting tree. 
    <p>For example, text content and text formatting elements in SVG
		require a <code><a data-link-type="element" href="https://svgwg.org/svg2-draft/text.html#elementdef-text" id="ref-for-elementdef-text">text</a></code> element context;
		if you remove a <code><a data-link-type="element" href="https://svgwg.org/svg2-draft/text.html#elementdef-text" id="ref-for-elementdef-text①">text</a></code>,
		its child text content and elements are no longer valid.
		For that reason, <a class="css" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display④⑧">display: contents</a> on <code><a data-link-type="element" href="https://svgwg.org/svg2-draft/text.html#elementdef-text" id="ref-for-elementdef-text②">text</a></code> prevents the entire text element from being rendered.
		In contrast, any valid content inside a <code><a data-link-type="element" href="https://svgwg.org/svg2-draft/text.html#elementdef-tspan" id="ref-for-elementdef-tspan">tspan</a></code> or <code><a data-link-type="element" href="https://svgwg.org/svg2-draft/text.html#elementdef-textPath" id="ref-for-elementdef-textPath">textPath</a></code> is also valid content inside the parent text formatting context,
		so the hoisting behavior applies for these elements.</p>
    <p>Similarly, if hoisting would convert the children from <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/render.html#TermNonRenderedElement" id="ref-for-TermNonRenderedElement">non-rendered elements</a> (e.g., a shape inside a <code><a data-link-type="element" href="https://svgwg.org/svg2-draft/pservers.html#elementdef-pattern" id="ref-for-elementdef-pattern">pattern</a></code> or <code><a data-link-type="element" href="https://svgwg.org/svg2-draft/struct.html#elementdef-symbol" id="ref-for-elementdef-symbol">symbol</a></code>)
		to <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/render.html#TermRenderedElement" id="ref-for-TermRenderedElement">rendered elements</a> (e.g., a shape that is a direct child of the <code><a data-link-type="element" href="https://svgwg.org/svg2-draft/struct.html#elementdef-svg" id="ref-for-elementdef-svg②">svg</a></code>),
		that is an invalid change of rendering context.
		Never-rendered container elements therefore cannot be "un-boxed"
		by <a class="css" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display④⑨">display: contents</a>.</p>
   </div>
   <p>When an element is stripped from the formatting tree,
	then any SVG attributes on that element
	that control layout and visual formatting
	are ignored when rendering the contents.
	However, SVG <a data-link-type="dfn" href="https://svgwg.org/svg2-draft/styling.html#TermPresentationAttribute" id="ref-for-TermPresentationAttribute">presentation attributes</a>—<wbr>which map to CSS properties—<wbr>continue to affect value processing and inheritance <a data-link-type="biblio" href="#biblio-css3-cascade">[CSS3-CASCADE]</a>;
	thus such attributes can affect
	the layout and visual formatting of the element’s descendants
	by influencing the values of such properties on those descendants.</p>
   <h3 class="heading settled" id="unbox-mathml"><span class="content">MathML Elements</span><a class="self-link" href="#unbox-mathml"></a></h3>
   <p>For all MathML elements, <a class="css" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display⑤⓪">display: contents</a> computes to <span class="css" id="ref-for-propdef-display⑤①">display: none</span>.</p>
   <h2 class="no-num heading settled" id="box-guidelines"><span class="content"> Appendix C: Box Construction Guidelines for Spec Authors</span><a class="self-link" href="#box-guidelines"></a></h2>
   <p><em>This section is non-normative guidance for specification authors.</em></p>
   <ul>
    <li data-md>
     <p>A box cannot be <a data-link-type="dfn" href="#blockify" id="ref-for-blockify⑧">blockified</a> and <a data-link-type="dfn" href="#inlinify" id="ref-for-inlinify⑦">inlinified</a> at the same time;
if such a thing would occur,
define which wins over the other.</p>
    <li data-md>
     <p>Non-principal non-anonymous boxes can’t be <a data-link-type="dfn" href="#blockify" id="ref-for-blockify⑨">blockified</a>:
blockification affects the element’s computed values
and thus determines the type of its <a data-link-type="dfn" href="#principal-box" id="ref-for-principal-box①①">principal box</a>.</p>
    <li data-md>
     <p>Boxes which <a data-link-type="dfn" href="#blockify" id="ref-for-blockify①⓪">blockify</a> their contents
can’t directly contain <a data-link-type="dfn" href="#inline-level" id="ref-for-inline-level⑦">inline-level</a> content;
any boxes or text runs generated within such an element
must be <span id="ref-for-blockify①①">blockified</span> or wrapped in an <a data-link-type="dfn" href="#anonymous" id="ref-for-anonymous③">anonymous</a> <a data-link-type="dfn" href="#block-container" id="ref-for-block-container①⑥">block container</a>.</p>
    <li data-md>
     <p>Boxes which <a data-link-type="dfn" href="#inlinify" id="ref-for-inlinify⑧">inlinify</a> their contents
can’t directly contain <a data-link-type="dfn" href="#block-level" id="ref-for-block-level⑦">block-level</a> boxes;
any boxes generated within such an element
must be <a data-link-type="dfn" href="#inline-level" id="ref-for-inline-level⑧">inline-level</a>.</p>
    <li data-md>
     <p>Boxes that fundamentally cannot establish an <a data-link-type="dfn" href="#independent-formatting-context" id="ref-for-independent-formatting-context④">independent formatting context</a> (such as non-replaced inlines)
must not be asked to <a data-link-type="dfn" href="#establish-an-independent-formatting-context" id="ref-for-establish-an-independent-formatting-context⑤">establish an independent formatting context</a>.
Blockify them first,
or otherwise change their box type to one that can establish an <span id="ref-for-independent-formatting-context⑤">independent formatting context</span>.</p>
   </ul>
   <h2 class="no-num heading settled" id="acknowledgments"><span class="content"> Acknowledgments</span><a class="self-link" href="#acknowledgments"></a></h2>
   <p>We would like to thank the many people who have attempted to separate out the disparate details of box generation over the years,
	most particularly Bert Bos,
	whose last attempt with <a class="property" data-link-type="propdesc">display-model</a> and <span class="property">display-role</span> didn’t get anywhere,
	but primed us for the current spec;
	Anton Prowse,
	whose relentless assault on CSS2.1 Chapter 9 forced some order out of the chaos;
	and Oriol Brufau,
	who teased apart dozens of fine distinctions and errors in this spec.
	Honorable mentions also go to David Baron, Mats Palmgren, Ilya Streltsyn,
	and Boris Zbarsky for their feedback.</p>
   <h2 class="no-num heading settled" id="changes"><span class="content"> Changes</span><a class="self-link" href="#changes"></a></h2>
   <p>Changes since the <a href="https://www.w3.org/TR/2018/CR-css-display-3-20180828/">28 August 2018 Candidate Recommendation</a> include:</p>
   <ul>
    <li id="change-parent"><a class="self-link" href="#change-parent"></a> Defined box tree parentage; see <a data-link-type="dfn" href="#css-parent-box" id="ref-for-css-parent-box">parent box</a>. 
    <li id="change-abspos"><a class="self-link" href="#change-abspos"></a> Added definition of <a data-link-type="dfn" href="#absolutely-positioned" id="ref-for-absolutely-positioned②">absolutely positioned</a> to the glossary; <a href="https://www.w3.org/TR/CSS2/visuren.html#absolutely-positioned">copied from CSS2</a> for easier referencing. 
    <li id="change-bidi-fragment"><a class="self-link" href="#change-bidi-fragment"></a> Added cross-references to various forms of fragmentation in <a href="#intro">§ 1 Introduction</a>. 
    <li id="change-table-grid-box"><a class="self-link" href="#change-table-grid-box"></a> Renamed “table box” to “table grid box” to more easily distinguish from “table wrapper box”. 
    <li id="change-body-propagation"><a class="self-link" href="#change-body-propagation"></a> Added “unless otherwise specified” to root → initial containing block propagation,
			since there are some regrettable special exceptions for the HTML <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/sections.html#the-body-element" id="ref-for-the-body-element">body</a></code> element. 
   </ul>
   <h3 class="heading settled" id="changes-wd"><span class="content"> Changes Prior to Candidate Recommendation Status</span><a class="self-link" href="#changes-wd"></a></h3>
   <p>A <a href="https://drafts.csswg.org/css-display-3/issues-wd-2017">Disposition of Comments</a> is available.</p>
   <p>Changes since the <a href="https://www.w3.org/TR/2018/WD-css-display-3-20180420/">20 April 2018 Working Draft</a> include:</p>
   <ul>
    <li> Elements with <a class="css" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display⑤②">display: contents</a> that behave as <span class="css" id="ref-for-propdef-display⑤③">display: none</span> now <em>compute to</em> <span class="css" id="ref-for-propdef-display⑤④">display: none</span>.
			(<a href="https://github.com/w3c/csswg-drafts/issues/2755">Issue 2755</a>) 
    <li> Distinguished “new” <a data-link-type="dfn" href="#formatting-context" id="ref-for-formatting-context①⑥">formatting context</a> from <a data-link-type="dfn" href="#independent-formatting-context" id="ref-for-independent-formatting-context⑥">independent formatting context</a> since certain formatting contexts layer.
			(<a href="https://github.com/w3c/csswg-drafts/issues/2597">Issue 2597</a>, <a href="https://github.com/w3c/csswg-drafts/issues/1457">Issue 1457</a>) 
    <li> Defined that <a data-link-type="dfn" href="#block-box" id="ref-for-block-box⑧">block boxes</a> that establish an <a data-link-type="dfn" href="#independent-formatting-context" id="ref-for-independent-formatting-context⑦">independent formatting context</a> have a used <a class="property" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display⑤⑤">display</a> of <a class="css" data-link-type="maybe" href="#valdef-display-flow-root" id="ref-for-valdef-display-flow-root⑧">flow-root</a>,
			to provide an easier point of reference.
			(<a href="https://github.com/w3c/csswg-drafts/issues/1550">Issue 1550</a>) 
    <li> Clarified that <a class="property" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display⑤⑥">display</a> is not animatable (as opposed to discretely animatable).
			(<a href="https://github.com/w3c/csswg-drafts/issues/2938">Issue 2938</a>) 
    <li> Minor editorial fixes. 
   </ul>
   <p>Changes since the <a href="https://www.w3.org/TR/2017/WD-css-display-3-20170720/">20 July 2017 Working Draft</a> include:</p>
   <ul>
    <li data-md>
     <p>Tightened up rules for the <a data-link-type="dfn" href="#blockify" id="ref-for-blockify①②">blockification</a> of <a class="css" data-link-type="maybe" href="#valdef-display-inline-block" id="ref-for-valdef-display-inline-block③">inline-block</a> / <span class="css">inline flow-root</span> to ensure compatibility with CSS2.
(<a href="https://github.com/w3c/csswg-drafts/issues/1246">Issue 1246</a>)
Updated handling of <span class="css">run-in flow-root</span> to match.
(<a href="https://github.com/w3c/csswg-drafts/issues/1715">Issue 1715</a>)</p>
    <li data-md>
     <p>Adjusted grammar of <a class="property" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display⑤⑦">display</a> to list the <a class="css" data-link-type="maybe" href="#valdef-display-list-item" id="ref-for-valdef-display-list-item④">list-item</a> keyword last. This affects the expected serialization order.
(<a href="https://github.com/w3c/csswg-drafts/issues/1621">Issue 1621</a>)</p>
    <li data-md>
     <p>Added better definition of interaction between <a data-link-type="dfn" href="#block-formatting-context" id="ref-for-block-formatting-context②④">block formatting contexts</a> and <a data-link-type="dfn" href="#inline-formatting-context" id="ref-for-inline-formatting-context⑨">inline formatting contexts</a> in block containers that establish inline formatting contexts.
(<a href="https://github.com/w3c/csswg-drafts/issues/1553">Issue 1553</a>)</p>
    <li data-md>
     <p>More clearly defined the way property values are reflected
between an element and its boxes (in the case of an element generating multiple boxes).
(<a href="https://github.com/w3c/csswg-drafts/issues/1643">Issue 1643</a>)</p>
    <li data-md>
     <p>Clarified that empty text objects are ignored for CSS rendering.
(<a href="https://github.com/w3c/csswg-drafts/issues/1808">Issue 1808</a>)</p>
    <li data-md>
     <p>Clarified that <a class="property" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display⑤⑧">display</a> has no effect on document semantics, since this is a common bug in UAs.
(<a href="https://github.com/w3c/csswg-drafts/issues/2355">Issue 2355</a>)</p>
    <li data-md>
     <p>Fixed error in definition of <a class="property" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display⑤⑨">display</a>’s <a data-link-type="dfn" href="https://drafts.csswg.org/css-cascade-4/#computed-value" id="ref-for-computed-value②">computed value</a> (which is definitely not “as specified”, due to <a data-link-type="dfn" href="#blockify" id="ref-for-blockify①③">blockification</a> and <a data-link-type="dfn" href="#inlinify" id="ref-for-inlinify⑨">inlinification</a> rules triggered by various properties).
(<a href="https://github.com/w3c/csswg-drafts/issues/1716">Issue 1716</a>)</p>
    <li data-md>
     <p>Added definition for <a data-link-type="dfn" href="#document-order" id="ref-for-document-order">document order</a>.</p>
    <li data-md>
     <p>Added missing SVG elements to <a href="#unbox">Appendix B</a>’s details on <a class="css" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display⑥⓪">display: contents</a> (<a href="https://github.com/w3c/csswg-drafts/issues/2118">Issue 2118</a>),
clarified effect of SVG attributes
(<a href="https://github.com/w3c/csswg-drafts/issues/2502">Issue 2502</a>),
and defined behavior for MathML
(<a href="https://github.com/w3c/csswg-drafts/issues/2167">Issue 2167</a>).</p>
    <li data-md>
     <p>Added some <a href="#box-guidelines">guidance</a> to future spec authors of anonymous box construction rules.
(<a href="https://github.com/w3c/csswg-drafts/issues/1643">Issue 1643</a>)</p>
    <li data-md>
     <p>Pushed the section about “becoming a formatting context” back to <a href="https://www.w3.org/TR/css-contain-1/">CSS Containment</a> where it is used.</p>
    <li data-md>
     <p>Various minor wording fixes and clarifications.</p>
   </ul>
   <p>Changes since the <a href="https://www.w3.org/TR/2017/WD-css-display-3-20170126/">26 January 2017 Working Draft</a> include:</p>
   <ul>
    <li data-md>
     <p>Remove <span class="css">inline-list-item</span> value that is equivalent to <span class="css">inline list-item</span>.</p>
    <li data-md>
     <p>Added the notion of “<a data-link-type="dfn" href="#text-nodes" id="ref-for-text-nodes⑤">text nodes</a>” to the <a data-link-type="dfn" href="#element-tree" id="ref-for-element-tree②">element tree</a>,
and “<a data-link-type="dfn" href="#text-run" id="ref-for-text-run①⓪">text runs</a>” to the <a data-link-type="dfn" href="#box-tree" id="ref-for-box-tree⑨">box tree</a> to define behavior in the context of <a class="css" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display⑥①">display: contents</a>.
(<a href="https://drafts.csswg.org/css-display-3/issues-wd-2017#issue-19">Issue 19</a>, <a href="https://drafts.csswg.org/css-display-3/issues-wd-2017#issue-32">Issue 32</a>)</p>
    <li data-md>
     <p>Defined that the root element is “in flow”.
(<a href="https://drafts.csswg.org/css-display-3/issues-wd-2017#issue-3">Issue 3</a>)</p>
    <li data-md>
     <p>Defined interaction of <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-first-line" id="ref-for-selectordef-first-line">::first-line</a>/<a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-first-letter" id="ref-for-selectordef-first-letter②">::first-letter</a> and <a class="css" data-link-type="maybe" href="#valdef-display-run-in" id="ref-for-valdef-display-run-in⑤">run-in</a>.
(<a href="https://drafts.csswg.org/css-display-3/issues-wd-2017#issue-5">Issue 5</a>, <a href="https://drafts.csswg.org/css-display-3/issues-wd-2017#issue-42">Issue 42</a>)</p>
    <li data-md>
     <p>Clarified that block/inline/run-in only dictates behavior in <a data-link-type="dfn" href="#flow-layout" id="ref-for-flow-layout⑥">flow layout</a>; it is ignored in other contexts.</p>
    <li data-md>
     <p>Run-ins are a type of inline box, not just "like" an inline box.</p>
    <li data-md>
     <p>Fixed the lack of recursion in of run-in’s box-tree munging.
(<a href="https://drafts.csswg.org/css-display-3/issues-wd-2017#issue-45">Issue 45</a>)</p>
    <li data-md>
     <p>Added an appendix on how <a class="css" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display⑥②">display: contents</a> works on “unusual elements”.
(<a href="https://drafts.csswg.org/css-display-3/issues-wd-2017#issue-8">Issue 8</a>, <a href="https://drafts.csswg.org/css-display-3/issues-wd-2017#issue-18">Issue 18</a>)</p>
    <li data-md>
     <p>Fix <a data-link-type="dfn" href="#blockify" id="ref-for-blockify①④">blockification</a> and <a data-link-type="dfn" href="#inlinify" id="ref-for-inlinify①⓪">inlinification</a> rules,
particularly handling of layout-internal types.
(<a href="https://drafts.csswg.org/css-display-3/issues-wd-2017#issue-35">Issue 35</a>, <a href="https://drafts.csswg.org/css-display-3/issues-wd-2017#issue-57">Issue 57</a>)</p>
    <li data-md>
     <p>Clarified interaction of various box tree fixups.
(<a href="https://drafts.csswg.org/css-display-3/issues-wd-2017#issue-38">Issue 38</a>, <a href="https://drafts.csswg.org/css-display-3/issues-wd-2017#issue-48">Issue 48</a>)</p>
    <li data-md>
     <p>Added the definition of “becoming a formatting context”.</p>
    <li data-md>
     <p>Miscellaneous minor fixes and minor clarifications.</p>
   </ul>
   <p>A <a href="https://drafts.csswg.org/css-display-3/issues-wd-2017">Disposition of Comments</a> is also available.</p>
   <p>Changes since the <a href="https://www.w3.org/TR/2015/WD-css-display-3-20151015/">15 October 2015 Working Draft</a> include:</p>
   <ul>
    <li>Deferred the <span class="css">box-suppress/display-or-not</span> property to the next level of Display,
		in order to provide time for further discussion of use cases. 
    <li>Specified the effects of <a class="css" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display⑥③">display: contents</a> on unusual elements such as replaced elements and form controls. 
    <li>Clarified that an element’s <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-before" id="ref-for-selectordef-before②">::before</a> and <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-after" id="ref-for-selectordef-after①">::after</a> pseudo-elements still exist if its own box is not generated due to <a class="css" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display⑥④">display: contents</a>. 
    <li>Clarified that event bubbling is not affected by <a class="css" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display⑥⑤">display: contents</a>. 
    <li>Clarified interaction of run-ins with out-of-flow elements and <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-pseudo-4/#selectordef-first-letter" id="ref-for-selectordef-first-letter③">::first-letter</a>. 
    <li>Switched <a class="css" data-link-type="maybe" href="#valdef-display-table-caption" id="ref-for-valdef-display-table-caption①">table-caption</a> and <a class="css" data-link-type="maybe" href="#valdef-display-table-cell" id="ref-for-valdef-display-table-cell②">table-cell</a> to use <a class="css" data-link-type="maybe" href="#valdef-display-flow-root" id="ref-for-valdef-display-flow-root⑨">flow-root</a> as their <a data-link-type="dfn" href="#inner-display-type" id="ref-for-inner-display-type①⑦">inner display type</a>, since they always form a formatting context root. 
    <li>Closed off remaining issues and added at-risk list. 
   </ul>
   <p>Changes since the <a href="https://www.w3.org/TR/2015/WD-css-display-3-20150721/">21 July 2015 Working Draft</a> include:</p>
   <ul>
    <li>Added definitions for <a data-link-type="dfn" href="#in-flow" id="ref-for-in-flow①">in-flow</a> and <a data-link-type="dfn" href="#out-of-flow" id="ref-for-out-of-flow⑤">out-of-flow</a> to glossary. 
   </ul>
   <p>Changes since the <a href="https://www.w3.org/TR/2014/WD-css-display-3-20140911/">11 September 2014 Working Draft</a> include:</p>
   <ul>
    <li>Removed <span class="css">display-inside</span>, <span class="css">display-outside</span>, and <span class="css">display-extras</span> longhands,
			in favor of just making <a class="property" data-link-type="propdesc" href="#propdef-display" id="ref-for-propdef-display⑥⑥">display</a> multi-value.
			(This was done to impose constraints on what can be combined.
			Future levels of this specification may relax some or all of those restrictions
			if they become unnecessary or unwanted.) 
    <li>Created the <a class="css" data-link-type="maybe" href="#valdef-display-flow" id="ref-for-valdef-display-flow⑨">flow</a> and <a class="css" data-link-type="maybe" href="#valdef-display-flow-root" id="ref-for-valdef-display-flow-root①⓪">flow-root</a> <a data-link-type="dfn" href="#inner-display-type" id="ref-for-inner-display-type①⑧">inner display types</a> to better express flow layout <a data-link-type="dfn" href="#display-type" id="ref-for-display-type③">display types</a> and to create an explicit switch for making an element a <a data-link-type="dfn" href="#bfc" id="ref-for-bfc①">BFC</a> root.
			(This should eliminate the need for hacks
			like <span class="css">::after { clear: both; }</span> and <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visufx.html#propdef-overflow" id="ref-for-propdef-overflow②">overflow: hidden</a> that are intended to accomplish this purpose.) 
   </ul>
   <h2 class="no-num heading settled" id="priv-sec"><span class="content"> Privacy and Security Considerations</span><a class="self-link" href="#priv-sec"></a></h2>
   <p>This specification introduces no new privacy or security considerations.</p>
  </main>
  <h2 class="no-ref no-num heading settled" id="conformance"><span class="content"> Conformance</span><a class="self-link" href="#conformance"></a></h2>
  <h3 class="heading settled" id="document-conventions"><span class="content"> Document conventions</span><a class="self-link" href="#document-conventions"></a></h3>
  <p>Conformance requirements are expressed with a combination of
	descriptive assertions and RFC 2119 terminology. The key words “MUST”,
	“MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
	“RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
	document are to be interpreted as described in RFC 2119.
	However, for readability, these words do not appear in all uppercase
	letters in this specification. </p>
  <p>All of the text of this specification is normative except sections
	explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a> </p>
  <p>Examples in this specification are introduced with the words “for example”
	or are set apart from the normative text with <code>class="example"</code>,
	like this: </p>
  <div class="example" id="example-ae2b6bc0">
   <a class="self-link" href="#example-ae2b6bc0"></a> 
   <p>This is an example of an informative example. </p>
  </div>
  <p>Informative notes begin with the word “Note” and are set apart from the
	normative text with <code>class="note"</code>, like this: </p>
  <p class="note" role="note">Note, this is an informative note. </p>
  <p>Advisements are normative sections styled to evoke special attention and are
	set apart from other normative text with <code>&lt;strong class="advisement"></code>, like
	this: <strong class="advisement"> UAs MUST provide an accessible alternative. </strong> </p>
  <h3 class="heading settled" id="conform-classes"><span class="content"> Conformance classes</span><a class="self-link" href="#conform-classes"></a></h3>
  <p>Conformance to this specification
	is defined for three conformance classes: </p>
  <dl>
   <dt>style sheet 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#style-sheet">CSS
			style sheet</a>. 
   <dt>renderer 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#user-agent">UA</a> that interprets the semantics of a style sheet and renders
			documents that use them. 
   <dt>authoring tool 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#user-agent">UA</a> that writes a style sheet. 
  </dl>
  <p>A style sheet is conformant to this specification
	if all of its statements that use syntax defined in this module are valid
	according to the generic CSS grammar and the individual grammars of each
	feature defined in this module. </p>
  <p>A renderer is conformant to this specification
	if, in addition to interpreting the style sheet as defined by the
	appropriate specifications, it supports all the features defined
	by this specification by parsing them correctly
	and rendering the document accordingly. However, the inability of a
	UA to correctly render a document due to limitations of the device
	does not make the UA non-conformant. (For example, a UA is not
	required to render color on a monochrome monitor.) </p>
  <p>An authoring tool is conformant to this specification
	if it writes style sheets that are syntactically correct according to the
	generic CSS grammar and the individual grammars of each feature in
	this module, and meet all other conformance requirements of style sheets
	as described in this module. </p>
  <h3 class="heading settled" id="conform-responsible"><span class="content"> Requirements for Responsible Implementation of CSS</span><a class="self-link" href="#conform-responsible"></a></h3>
  <p>The following sections define several conformance requirements
		for implementing CSS responsibly,
		in a way that promotes interoperability in the present and future. </p>
  <h4 class="heading settled" id="conform-partial"><span class="content"> Partial Implementations</span><a class="self-link" href="#conform-partial"></a></h4>
  <p>So that authors can exploit the forward-compatible parsing rules to assign fallback values, <strong>CSS renderers <em>must</em> treat as invalid
		(and <a href="http://www.w3.org/TR/CSS2/conform.html#ignore">ignore as appropriate</a>)
		any at-rules, properties, property values, keywords, and other syntactic constructs
		for which they have no usable level of support</strong>.
		In particular, user agents <em>must not</em> selectively ignore
		unsupported property values and honor supported values in a single multi-value property declaration:
		if any value is considered invalid (as unsupported values must be),
		CSS requires that the entire declaration be ignored. </p>
  <h4 class="heading settled" id="conform-future-proofing"><span class="content"> Implementations of Unstable and Proprietary Features</span><a class="self-link" href="#conform-future-proofing"></a></h4>
  <p>To avoid clashes with future stable CSS features,
		the CSSWG recommends <a href="http://www.w3.org/TR/CSS/#future-proofing">following best practices</a> for the implementation of <a href="http://www.w3.org/TR/CSS/#unstable">unstable</a> features and <a href="http://www.w3.org/TR/CSS/#proprietary-extension">proprietary extensions</a> to CSS. </p>
  <h4 class="heading settled" id="conform-testing"><span class="content"> Implementations of CR-level Features</span><a class="self-link" href="#conform-testing"></a></h4>
  <p>Once a specification reaches the Candidate Recommendation stage,
		implementers should release an <a data-link-type="dfn" href="http://www.w3.org/TR/CSS/#vendor-prefix">unprefixed</a> implementation
		of any CR-level feature they can demonstrate
		to be correctly implemented according to spec,
		and should avoid exposing a prefixed variant of that feature. </p>
  <p>To establish and maintain the interoperability of CSS across
		implementations, the CSS Working Group requests that non-experimental
		CSS renderers submit an implementation report (and, if necessary, the
		testcases used for that implementation report) to the W3C before
		releasing an unprefixed implementation of any CSS features. Testcases
		submitted to W3C are subject to review and correction by the CSS
		Working Group. </p>
  <p>
   Further information on submitting testcases and implementation reports
		can be found from on the CSS Working Group’s website at <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
		Questions should be directed to the <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> mailing list. 
<script src="https://www.w3.org/scripts/TR/2016/fixup.js"></script>
  </p>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
  <ul class="index">
   <li><a href="#absolutely-positioned">absolutely positioned</a><span>, in §Unnumbered section</span>
   <li><a href="#absolutely-positioned">absolutely positioned box</a><span>, in §Unnumbered section</span>
   <li><a href="#absolutely-positioned">absolutely positioned element</a><span>, in §Unnumbered section</span>
   <li><a href="#anonymous">anonymous</a><span>, in §1</span>
   <li><a href="#anonymous">anonymous box</a><span>, in §1</span>
   <li><a href="#atomic-inline">atomic inline</a><span>, in §Unnumbered section</span>
   <li><a href="#atomic-inline">atomic inline box</a><span>, in §Unnumbered section</span>
   <li><a href="#bfc">BFC</a><span>, in §Unnumbered section</span>
   <li>
    block
    <ul>
     <li><a href="#block">definition of</a><span>, in §Unnumbered section</span>
     <li><a href="#valdef-display-block">value for display, &lt;display-outside></a><span>, in §2.1</span>
    </ul>
   <li><a href="#block-box">block box</a><span>, in §Unnumbered section</span>
   <li><a href="#block-container">block container</a><span>, in §Unnumbered section</span>
   <li><a href="#block-container">block container box</a><span>, in §Unnumbered section</span>
   <li><a href="#block-formatting-context">block formatting context</a><span>, in §Unnumbered section</span>
   <li><a href="#block-formatting-context-root">block formatting context root</a><span>, in §Unnumbered section</span>
   <li><a href="#blockify">blockification</a><span>, in §2.7</span>
   <li><a href="#blockify">blockify</a><span>, in §2.7</span>
   <li><a href="#block-level">block-level</a><span>, in §Unnumbered section</span>
   <li><a href="#block-level-box">block-level box</a><span>, in §2.1</span>
   <li><a href="#block-level">block-level content</a><span>, in §Unnumbered section</span>
   <li><a href="#box">box</a><span>, in §1</span>
   <li><a href="#box-tree">box tree</a><span>, in §1</span>
   <li><a href="#containing-block">containing block</a><span>, in §Unnumbered section</span>
   <li><a href="#containing-block-chain">containing block chain</a><span>, in §Unnumbered section</span>
   <li><a href="#valdef-display-contents">contents</a><span>, in §2.5</span>
   <li><a href="#propdef-display">display</a><span>, in §2</span>
   <li><a href="#typedef-display-box">&lt;display-box></a><span>, in §2</span>
   <li><a href="#typedef-display-inside">&lt;display-inside></a><span>, in §2</span>
   <li><a href="#typedef-display-internal">&lt;display-internal></a><span>, in §2</span>
   <li><a href="#typedef-display-legacy">&lt;display-legacy></a><span>, in §2</span>
   <li><a href="#typedef-display-listitem">&lt;display-listitem></a><span>, in §2</span>
   <li><a href="#typedef-display-outside">&lt;display-outside></a><span>, in §2</span>
   <li><a href="#display-type">display type</a><span>, in §2</span>
   <li><a href="#document-order">document order</a><span>, in §Unnumbered section</span>
   <li><a href="#elements">element</a><span>, in §1</span>
   <li><a href="#element-tree">element tree</a><span>, in §1</span>
   <li><a href="#establish-an-independent-formatting-context">establish an independent formatting context</a><span>, in §Unnumbered section</span>
   <li><a href="#establish-an-independent-formatting-context">established an independent formatting context</a><span>, in §Unnumbered section</span>
   <li><a href="#establish-an-independent-formatting-context">establishes an independent formatting context</a><span>, in §Unnumbered section</span>
   <li><a href="#establish-an-independent-formatting-context">establishing an independent formatting context</a><span>, in §Unnumbered section</span>
   <li><a href="#valdef-display-flex">flex</a><span>, in §2.2</span>
   <li><a href="#valdef-display-flow">flow</a><span>, in §2.2</span>
   <li><a href="#flow-layout">flow layout</a><span>, in §2.2</span>
   <li><a href="#valdef-display-flow-root">flow-root</a><span>, in §2.2</span>
   <li><a href="#formatting-context">formatting context</a><span>, in §Unnumbered section</span>
   <li><a href="#valdef-display-grid">grid</a><span>, in §2.2</span>
   <li><a href="#independent-formatting-context">independent formatting context</a><span>, in §Unnumbered section</span>
   <li><a href="#in-flow">in-flow</a><span>, in §Unnumbered section</span>
   <li><a href="#initial-containing-block">initial containing block</a><span>, in §Unnumbered section</span>
   <li>
    inline
    <ul>
     <li><a href="#inline">definition of</a><span>, in §Unnumbered section</span>
     <li><a href="#valdef-display-inline">value for display, &lt;display-outside></a><span>, in §2.1</span>
    </ul>
   <li><a href="#valdef-display-inline-block">inline-block</a><span>, in §2.6</span>
   <li><a href="#inline-box">inline box</a><span>, in §Unnumbered section</span>
   <li><a href="#valdef-display-inline-flex">inline-flex</a><span>, in §2.6</span>
   <li><a href="#inline-formatting-context">inline formatting context</a><span>, in §Unnumbered section</span>
   <li><a href="#valdef-display-inline-grid">inline-grid</a><span>, in §2.6</span>
   <li><a href="#inline-level">inline-level</a><span>, in §Unnumbered section</span>
   <li><a href="#inline-level-box">inline-level box</a><span>, in §2.1</span>
   <li><a href="#inline-level">inline-level content</a><span>, in §Unnumbered section</span>
   <li><a href="#valdef-display-inline-table">inline-table</a><span>, in §2.6</span>
   <li><a href="#inlinify">inlinification</a><span>, in §2.7</span>
   <li><a href="#inlinify">inlinify</a><span>, in §2.7</span>
   <li><a href="#inner-display-type">inner</a><span>, in §2</span>
   <li><a href="#inner-display-type">inner display type</a><span>, in §2</span>
   <li><a href="#internal-ruby-box">internal ruby box</a><span>, in §2.4</span>
   <li><a href="#internal-ruby-element">internal ruby element</a><span>, in §2.4</span>
   <li><a href="#internal-table-box">internal table box</a><span>, in §2.4</span>
   <li><a href="#internal-table-element">internal table element</a><span>, in §2.4</span>
   <li><a href="#layout-internal">layout-internal</a><span>, in §2.4</span>
   <li><a href="#valdef-display-list-item">list-item</a><span>, in §2.3</span>
   <li><a href="#valdef-display-none">none</a><span>, in §2.5</span>
   <li><a href="#non-replaced">non-replaced</a><span>, in §Unnumbered section</span>
   <li><a href="#outer-display-type">outer</a><span>, in §2</span>
   <li><a href="#outer-display-type">outer display type</a><span>, in §2</span>
   <li><a href="#out-of-flow">out-of-flow</a><span>, in §Unnumbered section</span>
   <li><a href="#css-parent-box">parent box</a><span>, in §1</span>
   <li><a href="#principal-box">principal box</a><span>, in §Unnumbered section</span>
   <li><a href="#replaced-element">replaced</a><span>, in §Unnumbered section</span>
   <li><a href="#replaced-element">replaced element</a><span>, in §Unnumbered section</span>
   <li><a href="#valdef-display-ruby">ruby</a><span>, in §2.2</span>
   <li><a href="#valdef-display-ruby-base">ruby-base</a><span>, in §2.4</span>
   <li><a href="#valdef-display-ruby-base-container">ruby-base-container</a><span>, in §2.4</span>
   <li><a href="#valdef-display-ruby-text">ruby-text</a><span>, in §2.4</span>
   <li><a href="#valdef-display-ruby-text-container">ruby-text-container</a><span>, in §2.4</span>
   <li>
    run-in
    <ul>
     <li><a href="#run-in">definition of</a><span>, in §3</span>
     <li><a href="#valdef-display-run-in">value for display, &lt;display-outside></a><span>, in §2.1</span>
    </ul>
   <li><a href="#run-in">run-in box</a><span>, in §3</span>
   <li><a href="#run-in-sequence">run-in sequence</a><span>, in §3</span>
   <li><a href="#valdef-display-table">table</a><span>, in §2.2</span>
   <li><a href="#valdef-display-table-caption">table-caption</a><span>, in §2.4</span>
   <li><a href="#table-caption-box">table caption box</a><span>, in §2.4</span>
   <li><a href="#valdef-display-table-cell">table-cell</a><span>, in §2.4</span>
   <li><a href="#valdef-display-table-column">table-column</a><span>, in §2.4</span>
   <li><a href="#valdef-display-table-column-group">table-column-group</a><span>, in §2.4</span>
   <li><a href="#valdef-display-table-footer-group">table-footer-group</a><span>, in §2.4</span>
   <li><a href="#valdef-display-table-header-group">table-header-group</a><span>, in §2.4</span>
   <li><a href="#valdef-display-table-row">table-row</a><span>, in §2.4</span>
   <li><a href="#valdef-display-table-row-group">table-row-group</a><span>, in §2.4</span>
   <li><a href="#text-nodes">text node</a><span>, in §1</span>
   <li><a href="#text-run">text run</a><span>, in §1</span>
  </ul>
  <aside class="dfn-panel" data-for="term-for-propdef-align-content">
   <a href="https://drafts.csswg.org/css-align-3/#propdef-align-content">https://drafts.csswg.org/css-align-3/#propdef-align-content</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-align-content"> Appendix A: Glossary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border">https://drafts.csswg.org/css-backgrounds-3/#propdef-border</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border">1. 
Introduction</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-box-fragment">
   <a href="https://drafts.csswg.org/css-break-4/#box-fragment">https://drafts.csswg.org/css-break-4/#box-fragment</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-box-fragment">1. 
Introduction</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-fragmentation">
   <a href="https://drafts.csswg.org/css-break-4/#fragmentation">https://drafts.csswg.org/css-break-4/#fragmentation</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-fragmentation">1. 
Introduction</a> <a href="#ref-for-fragmentation①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-computed-value">
   <a href="https://drafts.csswg.org/css-cascade-4/#computed-value">https://drafts.csswg.org/css-cascade-4/#computed-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-computed-value">1. 
Introduction</a>
    <li><a href="#ref-for-computed-value①">2.7. 
Automatic Box Type Transformations</a>
    <li><a href="#ref-for-computed-value②"> Changes Prior to Candidate Recommendation Status</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-inheritance">
   <a href="https://drafts.csswg.org/css-cascade-4/#inheritance">https://drafts.csswg.org/css-cascade-4/#inheritance</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-inheritance">2.5. 
Box Generation: the none and contents keywords</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-inherited-property">
   <a href="https://drafts.csswg.org/css-cascade-4/#inherited-property">https://drafts.csswg.org/css-cascade-4/#inherited-property</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-inherited-property">1. 
Introduction</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-contain">
   <a href="https://drafts.csswg.org/css-contain-1/#propdef-contain">https://drafts.csswg.org/css-contain-1/#propdef-contain</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-contain"> Appendix A: Glossary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-subgrid">
   <a href="https://drafts.csswg.org/css-grid-2/#subgrid">https://drafts.csswg.org/css-grid-2/#subgrid</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-subgrid"> Appendix A: Glossary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-root-inline-box">
   <a href="https://drafts.csswg.org/css-inline-3/#root-inline-box">https://drafts.csswg.org/css-inline-3/#root-inline-box</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-root-inline-box"> Appendix A: Glossary</a> <a href="#ref-for-root-inline-box①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-scroll-container">
   <a href="https://drafts.csswg.org/css-overflow-3/#scroll-container">https://drafts.csswg.org/css-overflow-3/#scroll-container</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-scroll-container"> Appendix A: Glossary</a> <a href="#ref-for-scroll-container①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-position-absolute">
   <a href="https://drafts.csswg.org/css-position-3/#valdef-position-absolute">https://drafts.csswg.org/css-position-3/#valdef-position-absolute</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-position-absolute"> Appendix A: Glossary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-position-fixed">
   <a href="https://drafts.csswg.org/css-position-3/#valdef-position-fixed">https://drafts.csswg.org/css-position-3/#valdef-position-fixed</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-position-fixed"> Appendix A: Glossary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-position">
   <a href="https://drafts.csswg.org/css-position-3/#propdef-position">https://drafts.csswg.org/css-position-3/#propdef-position</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-position">2.2. 
Inner Display Layout Models: the flow, flow-root, table, flex, grid, and ruby keywords</a>
    <li><a href="#ref-for-propdef-position①"> Appendix A: Glossary</a> <a href="#ref-for-propdef-position②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-selectordef-after">
   <a href="https://drafts.csswg.org/css-pseudo-4/#selectordef-after">https://drafts.csswg.org/css-pseudo-4/#selectordef-after</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-selectordef-after">2.5. 
Box Generation: the none and contents keywords</a>
    <li><a href="#ref-for-selectordef-after①"> Changes Prior to Candidate Recommendation Status</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-selectordef-before">
   <a href="https://drafts.csswg.org/css-pseudo-4/#selectordef-before">https://drafts.csswg.org/css-pseudo-4/#selectordef-before</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-selectordef-before">2.5. 
Box Generation: the none and contents keywords</a>
    <li><a href="#ref-for-selectordef-before①">3. 
Run-In Layout</a>
    <li><a href="#ref-for-selectordef-before②"> Changes Prior to Candidate Recommendation Status</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-selectordef-first-letter">
   <a href="https://drafts.csswg.org/css-pseudo-4/#selectordef-first-letter">https://drafts.csswg.org/css-pseudo-4/#selectordef-first-letter</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-selectordef-first-letter①">3. 
Run-In Layout</a>
    <li><a href="#ref-for-selectordef-first-letter②"> Changes Prior to Candidate Recommendation Status</a> <a href="#ref-for-selectordef-first-letter③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-selectordef-first-line">
   <a href="https://drafts.csswg.org/css-pseudo-4/#selectordef-first-line">https://drafts.csswg.org/css-pseudo-4/#selectordef-first-line</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-selectordef-first-line"> Changes Prior to Candidate Recommendation Status</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-selectordef-marker">
   <a href="https://drafts.csswg.org/css-pseudo-4/#selectordef-marker">https://drafts.csswg.org/css-pseudo-4/#selectordef-marker</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-selectordef-marker">2. 
Box Layout Modes: the display property</a>
    <li><a href="#ref-for-selectordef-marker①">2.3. 
Generating Marker Boxes: the list-item keyword</a>
    <li><a href="#ref-for-selectordef-marker②">3. 
Run-In Layout</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-first-formatted-line">
   <a href="https://drafts.csswg.org/css-pseudo-4/#first-formatted-line">https://drafts.csswg.org/css-pseudo-4/#first-formatted-line</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-first-formatted-line">3. 
Run-In Layout</a> <a href="#ref-for-first-formatted-line①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-table-grid-box">
   <a href="https://drafts.csswg.org/css-tables-3/#table-grid-box">https://drafts.csswg.org/css-tables-3/#table-grid-box</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-table-grid-box">1. 
Introduction</a>
    <li><a href="#ref-for-table-grid-box①">2. 
Box Layout Modes: the display property</a> <a href="#ref-for-table-grid-box②">(2)</a>
    <li><a href="#ref-for-table-grid-box③">2.2. 
Inner Display Layout Models: the flow, flow-root, table, flex, grid, and ruby keywords</a>
    <li><a href="#ref-for-table-grid-box④"> Appendix A: Glossary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-table-wrapper-box">
   <a href="https://drafts.csswg.org/css-tables-3/#table-wrapper-box">https://drafts.csswg.org/css-tables-3/#table-wrapper-box</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-table-wrapper-box">1. 
Introduction</a>
    <li><a href="#ref-for-table-wrapper-box①">2. 
Box Layout Modes: the display property</a> <a href="#ref-for-table-wrapper-box②">(2)</a>
    <li><a href="#ref-for-table-wrapper-box③">2.2. 
Inner Display Layout Models: the flow, flow-root, table, flex, grid, and ruby keywords</a>
    <li><a href="#ref-for-table-wrapper-box④"> Appendix A: Glossary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-white-space">
   <a href="https://drafts.csswg.org/css-text-3/#white-space">https://drafts.csswg.org/css-text-3/#white-space</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-white-space">3. 
Run-In Layout</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-comb-all">
   <a href="https://drafts.csswg.org/css-values-4/#comb-all">https://drafts.csswg.org/css-values-4/#comb-all</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-comb-all">2. 
Box Layout Modes: the display property</a> <a href="#ref-for-comb-all①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-mult-opt">
   <a href="https://drafts.csswg.org/css-values-4/#mult-opt">https://drafts.csswg.org/css-values-4/#mult-opt</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mult-opt">2. 
Box Layout Modes: the display property</a> <a href="#ref-for-mult-opt①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-css-wide-keywords">
   <a href="https://drafts.csswg.org/css-values-4/#css-wide-keywords">https://drafts.csswg.org/css-values-4/#css-wide-keywords</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-css-wide-keywords">1.2. 
Values</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-comb-one">
   <a href="https://drafts.csswg.org/css-values-4/#comb-one">https://drafts.csswg.org/css-values-4/#comb-one</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-comb-one">2. 
Box Layout Modes: the display property</a> <a href="#ref-for-comb-one①">(2)</a> <a href="#ref-for-comb-one②">(3)</a> <a href="#ref-for-comb-one③">(4)</a> <a href="#ref-for-comb-one④">(5)</a> <a href="#ref-for-comb-one⑤">(6)</a> <a href="#ref-for-comb-one⑥">(7)</a> <a href="#ref-for-comb-one⑦">(8)</a> <a href="#ref-for-comb-one⑧">(9)</a> <a href="#ref-for-comb-one⑨">(10)</a> <a href="#ref-for-comb-one①⓪">(11)</a> <a href="#ref-for-comb-one①①">(12)</a> <a href="#ref-for-comb-one①②">(13)</a> <a href="#ref-for-comb-one①③">(14)</a> <a href="#ref-for-comb-one①④">(15)</a> <a href="#ref-for-comb-one①⑤">(16)</a> <a href="#ref-for-comb-one①⑥">(17)</a> <a href="#ref-for-comb-one①⑦">(18)</a> <a href="#ref-for-comb-one①⑧">(19)</a> <a href="#ref-for-comb-one①⑨">(20)</a> <a href="#ref-for-comb-one②⓪">(21)</a> <a href="#ref-for-comb-one②①">(22)</a> <a href="#ref-for-comb-one②②">(23)</a> <a href="#ref-for-comb-one②③">(24)</a> <a href="#ref-for-comb-one②④">(25)</a> <a href="#ref-for-comb-one②⑤">(26)</a> <a href="#ref-for-comb-one②⑥">(27)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-comb-any">
   <a href="https://drafts.csswg.org/css-values-4/#comb-any">https://drafts.csswg.org/css-values-4/#comb-any</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-comb-any">2. 
Box Layout Modes: the display property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-float">
   <a href="https://drafts.csswg.org/css2/visuren.html#propdef-float">https://drafts.csswg.org/css2/visuren.html#propdef-float</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-float">2.2. 
Inner Display Layout Models: the flow, flow-root, table, flex, grid, and ruby keywords</a>
    <li><a href="#ref-for-propdef-float①"> Appendix A: Glossary</a> <a href="#ref-for-propdef-float②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-list-style">
   <a href="https://drafts.csswg.org/css2/generate.html#propdef-list-style">https://drafts.csswg.org/css2/generate.html#propdef-list-style</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-list-style">2.3. 
Generating Marker Boxes: the list-item keyword</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-overflow">
   <a href="https://drafts.csswg.org/css2/visufx.html#propdef-overflow">https://drafts.csswg.org/css2/visufx.html#propdef-overflow</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-overflow">2.2. 
Inner Display Layout Models: the flow, flow-root, table, flex, grid, and ruby keywords</a>
    <li><a href="#ref-for-propdef-overflow①"> Appendix A: Glossary</a>
    <li><a href="#ref-for-propdef-overflow②"> Changes Prior to Candidate Recommendation Status</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-fragment">
   <a href="https://drafts.csswg.org/css-break-3/#fragment">https://drafts.csswg.org/css-break-3/#fragment</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-fragment">1. 
Introduction</a> <a href="#ref-for-fragment①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-flex-container">
   <a href="https://drafts.csswg.org/css-flexbox-1/#flex-container">https://drafts.csswg.org/css-flexbox-1/#flex-container</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-flex-container">2. 
Box Layout Modes: the display property</a> <a href="#ref-for-flex-container①">(2)</a>
    <li><a href="#ref-for-flex-container②">2.2. 
Inner Display Layout Models: the flow, flow-root, table, flex, grid, and ruby keywords</a>
    <li><a href="#ref-for-flex-container③"> Appendix A: Glossary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-flex-formatting-context">
   <a href="https://drafts.csswg.org/css-flexbox-1/#flex-formatting-context">https://drafts.csswg.org/css-flexbox-1/#flex-formatting-context</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-flex-formatting-context">2.2. 
Inner Display Layout Models: the flow, flow-root, table, flex, grid, and ruby keywords</a>
    <li><a href="#ref-for-flex-formatting-context①"> Appendix A: Glossary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-flex-layout">
   <a href="https://drafts.csswg.org/css-flexbox-1/#flex-layout">https://drafts.csswg.org/css-flexbox-1/#flex-layout</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-flex-layout"> Appendix A: Glossary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-grid-container">
   <a href="https://drafts.csswg.org/css-grid-1/#grid-container">https://drafts.csswg.org/css-grid-1/#grid-container</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-grid-container">2. 
Box Layout Modes: the display property</a> <a href="#ref-for-grid-container①">(2)</a>
    <li><a href="#ref-for-grid-container②">2.2. 
Inner Display Layout Models: the flow, flow-root, table, flex, grid, and ruby keywords</a>
    <li><a href="#ref-for-grid-container③"> Appendix A: Glossary</a> <a href="#ref-for-grid-container④">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-grid-formatting-context">
   <a href="https://drafts.csswg.org/css-grid-1/#grid-formatting-context">https://drafts.csswg.org/css-grid-1/#grid-formatting-context</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-grid-formatting-context">2.2. 
Inner Display Layout Models: the flow, flow-root, table, flex, grid, and ruby keywords</a>
    <li><a href="#ref-for-grid-formatting-context①"> Appendix A: Glossary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-ruby-base-container-box">
   <a href="https://drafts.csswg.org/css-ruby-1/#ruby-base-container-box">https://drafts.csswg.org/css-ruby-1/#ruby-base-container-box</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-ruby-base-container-box"> Appendix A: Glossary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-ruby-container">
   <a href="https://drafts.csswg.org/css-ruby-1/#ruby-container">https://drafts.csswg.org/css-ruby-1/#ruby-container</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-ruby-container">2. 
Box Layout Modes: the display property</a> <a href="#ref-for-ruby-container①">(2)</a>
    <li><a href="#ref-for-ruby-container②">2.2. 
Inner Display Layout Models: the flow, flow-root, table, flex, grid, and ruby keywords</a>
    <li><a href="#ref-for-ruby-container③">2.7. 
Automatic Box Type Transformations</a>
    <li><a href="#ref-for-ruby-container④"> Appendix A: Glossary</a> <a href="#ref-for-ruby-container⑤">(2)</a> <a href="#ref-for-ruby-container⑥">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-ruby-formatting-context">
   <a href="https://drafts.csswg.org/css-ruby-1/#ruby-formatting-context">https://drafts.csswg.org/css-ruby-1/#ruby-formatting-context</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-ruby-formatting-context">2.2. 
Inner Display Layout Models: the flow, flow-root, table, flex, grid, and ruby keywords</a>
    <li><a href="#ref-for-ruby-formatting-context①">2.4. 
Layout-Internal Display Types: the table-* and ruby-* keywords</a>
    <li><a href="#ref-for-ruby-formatting-context②"> Appendix A: Glossary</a> <a href="#ref-for-ruby-formatting-context③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-window-getcomputedstyle">
   <a href="https://drafts.csswg.org/cssom-1/#dom-window-getcomputedstyle">https://drafts.csswg.org/cssom-1/#dom-window-getcomputedstyle</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-window-getcomputedstyle">1. 
Introduction</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-audio">
   <a href="https://html.spec.whatwg.org/multipage/media.html#audio">https://html.spec.whatwg.org/multipage/media.html#audio</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-audio">HTML Elements</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-body-element">
   <a href="https://html.spec.whatwg.org/multipage/sections.html#the-body-element">https://html.spec.whatwg.org/multipage/sections.html#the-body-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-body-element"> Changes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-br-element">
   <a href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-br-element">https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-br-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-br-element">HTML Elements</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-button-element">
   <a href="https://html.spec.whatwg.org/multipage/form-elements.html#the-button-element">https://html.spec.whatwg.org/multipage/form-elements.html#the-button-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-button-element">HTML Elements</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-canvas">
   <a href="https://html.spec.whatwg.org/multipage/canvas.html#canvas">https://html.spec.whatwg.org/multipage/canvas.html#canvas</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-canvas">HTML Elements</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-details-element">
   <a href="https://html.spec.whatwg.org/multipage/interactive-elements.html#the-details-element">https://html.spec.whatwg.org/multipage/interactive-elements.html#the-details-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-details-element">HTML Elements</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-embed-element">
   <a href="https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-embed-element">https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-embed-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-embed-element">HTML Elements</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-fieldset-element">
   <a href="https://html.spec.whatwg.org/multipage/form-elements.html#the-fieldset-element">https://html.spec.whatwg.org/multipage/form-elements.html#the-fieldset-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-fieldset-element">2.5. 
Box Generation: the none and contents keywords</a>
    <li><a href="#ref-for-the-fieldset-element①">HTML Elements</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-frame">
   <a href="https://html.spec.whatwg.org/multipage/obsolete.html#frame">https://html.spec.whatwg.org/multipage/obsolete.html#frame</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-frame">HTML Elements</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-frameset">
   <a href="https://html.spec.whatwg.org/multipage/obsolete.html#frameset">https://html.spec.whatwg.org/multipage/obsolete.html#frameset</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-frameset">HTML Elements</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-iframe-element">
   <a href="https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-iframe-element">https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-iframe-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-iframe-element">HTML Elements</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-img-element">
   <a href="https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element">https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-img-element"> Appendix A: Glossary</a>
    <li><a href="#ref-for-the-img-element①"> Appendix B: Effects of display: contents on Unusual Elements</a>
    <li><a href="#ref-for-the-img-element②">HTML Elements</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-input-element">
   <a href="https://html.spec.whatwg.org/multipage/input.html#the-input-element">https://html.spec.whatwg.org/multipage/input.html#the-input-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-input-element"> Appendix B: Effects of display: contents on Unusual Elements</a>
    <li><a href="#ref-for-the-input-element①">HTML Elements</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-legend-element">
   <a href="https://html.spec.whatwg.org/multipage/form-elements.html#the-legend-element">https://html.spec.whatwg.org/multipage/form-elements.html#the-legend-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-legend-element">2.5. 
Box Generation: the none and contents keywords</a>
    <li><a href="#ref-for-the-legend-element①">HTML Elements</a> <a href="#ref-for-the-legend-element②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-meter-element">
   <a href="https://html.spec.whatwg.org/multipage/form-elements.html#the-meter-element">https://html.spec.whatwg.org/multipage/form-elements.html#the-meter-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-meter-element">HTML Elements</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-object-element">
   <a href="https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-object-element">https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-object-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-object-element">HTML Elements</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-progress-element">
   <a href="https://html.spec.whatwg.org/multipage/form-elements.html#the-progress-element">https://html.spec.whatwg.org/multipage/form-elements.html#the-progress-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-progress-element">HTML Elements</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-rendered-legend">
   <a href="https://html.spec.whatwg.org/multipage/rendering.html#rendered-legend">https://html.spec.whatwg.org/multipage/rendering.html#rendered-legend</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-rendered-legend">HTML Elements</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-select-element">
   <a href="https://html.spec.whatwg.org/multipage/form-elements.html#the-select-element">https://html.spec.whatwg.org/multipage/form-elements.html#the-select-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-select-element">HTML Elements</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-attr-img-src">
   <a href="https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-src">https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-src</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-attr-img-src"> Appendix A: Glossary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-summary-element">
   <a href="https://html.spec.whatwg.org/multipage/interactive-elements.html#the-summary-element">https://html.spec.whatwg.org/multipage/interactive-elements.html#the-summary-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-summary-element">2.5. 
Box Generation: the none and contents keywords</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-textarea-element">
   <a href="https://html.spec.whatwg.org/multipage/form-elements.html#the-textarea-element">https://html.spec.whatwg.org/multipage/form-elements.html#the-textarea-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-textarea-element">HTML Elements</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-video">
   <a href="https://html.spec.whatwg.org/multipage/media.html#video">https://html.spec.whatwg.org/multipage/media.html#video</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-video">HTML Elements</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-wbr-element">
   <a href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-wbr-element">https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-wbr-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-wbr-element">HTML Elements</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-document-language">
   <a href="https://drafts.csswg.org/selectors-4/#document-language">https://drafts.csswg.org/selectors-4/#document-language</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-document-language">2. 
Box Layout Modes: the display property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-pseudo-element">
   <a href="https://drafts.csswg.org/selectors-4/#pseudo-element">https://drafts.csswg.org/selectors-4/#pseudo-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-pseudo-element">1. 
Introduction</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-container-element">
   <a href="https://svgwg.org/svg2-draft/struct.html#container-element">https://svgwg.org/svg2-draft/struct.html#container-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-container-element">SVG Elements</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-TermNonRenderedElement">
   <a href="https://svgwg.org/svg2-draft/render.html#TermNonRenderedElement">https://svgwg.org/svg2-draft/render.html#TermNonRenderedElement</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-TermNonRenderedElement">SVG Elements</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-elementdef-pattern">
   <a href="https://svgwg.org/svg2-draft/pservers.html#elementdef-pattern">https://svgwg.org/svg2-draft/pservers.html#elementdef-pattern</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-elementdef-pattern">SVG Elements</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-TermPresentationAttribute">
   <a href="https://svgwg.org/svg2-draft/styling.html#TermPresentationAttribute">https://svgwg.org/svg2-draft/styling.html#TermPresentationAttribute</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-TermPresentationAttribute">SVG Elements</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-TermRenderableElement">
   <a href="https://svgwg.org/svg2-draft/render.html#TermRenderableElement">https://svgwg.org/svg2-draft/render.html#TermRenderableElement</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-TermRenderableElement">SVG Elements</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-TermRenderedElement">
   <a href="https://svgwg.org/svg2-draft/render.html#TermRenderedElement">https://svgwg.org/svg2-draft/render.html#TermRenderedElement</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-TermRenderedElement">SVG Elements</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-elementdef-svg">
   <a href="https://svgwg.org/svg2-draft/struct.html#elementdef-svg">https://svgwg.org/svg2-draft/struct.html#elementdef-svg</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-elementdef-svg">SVG Elements</a> <a href="#ref-for-elementdef-svg①">(2)</a> <a href="#ref-for-elementdef-svg②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-elementdef-symbol">
   <a href="https://svgwg.org/svg2-draft/struct.html#elementdef-symbol">https://svgwg.org/svg2-draft/struct.html#elementdef-symbol</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-elementdef-symbol">SVG Elements</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-elementdef-text">
   <a href="https://svgwg.org/svg2-draft/text.html#elementdef-text">https://svgwg.org/svg2-draft/text.html#elementdef-text</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-elementdef-text">SVG Elements</a> <a href="#ref-for-elementdef-text①">(2)</a> <a href="#ref-for-elementdef-text②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-TermTextContentChildElement">
   <a href="https://svgwg.org/svg2-draft/text.html#TermTextContentChildElement">https://svgwg.org/svg2-draft/text.html#TermTextContentChildElement</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-TermTextContentChildElement">SVG Elements</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-elementdef-textPath">
   <a href="https://svgwg.org/svg2-draft/text.html#elementdef-textPath">https://svgwg.org/svg2-draft/text.html#elementdef-textPath</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-elementdef-textPath">SVG Elements</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-elementdef-tspan">
   <a href="https://svgwg.org/svg2-draft/text.html#elementdef-tspan">https://svgwg.org/svg2-draft/text.html#elementdef-tspan</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-elementdef-tspan">SVG Elements</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-elementdef-use">
   <a href="https://svgwg.org/svg2-draft/struct.html#elementdef-use">https://svgwg.org/svg2-draft/struct.html#elementdef-use</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-elementdef-use">SVG Elements</a> <a href="#ref-for-elementdef-use①">(2)</a>
   </ul>
  </aside>
  <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
  <ul class="index">
   <li>
    <a data-link-type="biblio">[css-align-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-align-content" style="color:initial">align-content</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-backgrounds-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-border" style="color:initial">border</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-break-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-box-fragment" style="color:initial">box fragment</span>
     <li><span class="dfn-paneled" id="term-for-fragmentation" style="color:initial">fragmentation</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-cascade-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-computed-value" style="color:initial">computed value</span>
     <li><span class="dfn-paneled" id="term-for-inheritance" style="color:initial">inheritance</span>
     <li><span class="dfn-paneled" id="term-for-inherited-property" style="color:initial">inherited property</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-contain-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-contain" style="color:initial">contain</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-grid-2]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-subgrid" style="color:initial">subgrid</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-inline-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-root-inline-box" style="color:initial">root inline box</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-overflow-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-scroll-container" style="color:initial">scroll container</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-position-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-valdef-position-absolute" style="color:initial">absolute</span>
     <li><span class="dfn-paneled" id="term-for-valdef-position-fixed" style="color:initial">fixed</span>
     <li><span class="dfn-paneled" id="term-for-propdef-position" style="color:initial">position</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS-PSEUDO-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-selectordef-after" style="color:initial">::after</span>
     <li><span class="dfn-paneled" id="term-for-selectordef-before" style="color:initial">::before</span>
     <li><span class="dfn-paneled" id="term-for-selectordef-first-letter" style="color:initial">::first-letter</span>
     <li><span class="dfn-paneled" id="term-for-selectordef-first-line" style="color:initial">::first-line</span>
     <li><span class="dfn-paneled" id="term-for-selectordef-marker" style="color:initial">::marker</span>
     <li><span class="dfn-paneled" id="term-for-first-formatted-line" style="color:initial">first formatted line</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-tables-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-table-grid-box" style="color:initial">table grid box</span>
     <li><span class="dfn-paneled" id="term-for-table-wrapper-box" style="color:initial">table wrapper box</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-text-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-white-space" style="color:initial">white space</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-values-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-comb-all" style="color:initial">&amp;&amp;</span>
     <li><span class="dfn-paneled" id="term-for-mult-opt" style="color:initial">?</span>
     <li><span class="dfn-paneled" id="term-for-css-wide-keywords" style="color:initial">css-wide keywords</span>
     <li><span class="dfn-paneled" id="term-for-comb-one" style="color:initial">|</span>
     <li><span class="dfn-paneled" id="term-for-comb-any" style="color:initial">||</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS2]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-float" style="color:initial">float</span>
     <li><span class="dfn-paneled" id="term-for-propdef-list-style" style="color:initial">list-style</span>
     <li><span class="dfn-paneled" id="term-for-propdef-overflow" style="color:initial">overflow</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS3-BREAK]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-fragment" style="color:initial">fragment</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS3-FLEXBOX]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-flex-container" style="color:initial">flex container</span>
     <li><span class="dfn-paneled" id="term-for-flex-formatting-context" style="color:initial">flex formatting context</span>
     <li><span class="dfn-paneled" id="term-for-flex-layout" style="color:initial">flex layout</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS3-GRID-LAYOUT]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-grid-container" style="color:initial">grid container</span>
     <li><span class="dfn-paneled" id="term-for-grid-formatting-context" style="color:initial">grid formatting context</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS3RUBY]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-ruby-base-container-box" style="color:initial">ruby base container</span>
     <li><span class="dfn-paneled" id="term-for-ruby-container" style="color:initial">ruby container</span>
     <li><span class="dfn-paneled" id="term-for-ruby-formatting-context" style="color:initial">ruby formatting context</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSSOM]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-dom-window-getcomputedstyle" style="color:initial">getComputedStyle(elt)</span>
    </ul>
   <li>
    <a data-link-type="biblio">[HTML]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-audio" style="color:initial">audio</span>
     <li><span class="dfn-paneled" id="term-for-the-body-element" style="color:initial">body</span>
     <li><span class="dfn-paneled" id="term-for-the-br-element" style="color:initial">br</span>
     <li><span class="dfn-paneled" id="term-for-the-button-element" style="color:initial">button</span>
     <li><span class="dfn-paneled" id="term-for-canvas" style="color:initial">canvas</span>
     <li><span class="dfn-paneled" id="term-for-the-details-element" style="color:initial">details</span>
     <li><span class="dfn-paneled" id="term-for-the-embed-element" style="color:initial">embed</span>
     <li><span class="dfn-paneled" id="term-for-the-fieldset-element" style="color:initial">fieldset</span>
     <li><span class="dfn-paneled" id="term-for-frame" style="color:initial">frame</span>
     <li><span class="dfn-paneled" id="term-for-frameset" style="color:initial">frameset</span>
     <li><span class="dfn-paneled" id="term-for-the-iframe-element" style="color:initial">iframe</span>
     <li><span class="dfn-paneled" id="term-for-the-img-element" style="color:initial">img</span>
     <li><span class="dfn-paneled" id="term-for-the-input-element" style="color:initial">input</span>
     <li><span class="dfn-paneled" id="term-for-the-legend-element" style="color:initial">legend</span>
     <li><span class="dfn-paneled" id="term-for-the-meter-element" style="color:initial">meter</span>
     <li><span class="dfn-paneled" id="term-for-the-object-element" style="color:initial">object</span>
     <li><span class="dfn-paneled" id="term-for-the-progress-element" style="color:initial">progress</span>
     <li><span class="dfn-paneled" id="term-for-rendered-legend" style="color:initial">rendered legend</span>
     <li><span class="dfn-paneled" id="term-for-the-select-element" style="color:initial">select</span>
     <li><span class="dfn-paneled" id="term-for-attr-img-src" style="color:initial">src</span>
     <li><span class="dfn-paneled" id="term-for-the-summary-element" style="color:initial">summary</span>
     <li><span class="dfn-paneled" id="term-for-the-textarea-element" style="color:initial">textarea</span>
     <li><span class="dfn-paneled" id="term-for-video" style="color:initial">video</span>
     <li><span class="dfn-paneled" id="term-for-the-wbr-element" style="color:initial">wbr</span>
    </ul>
   <li>
    <a data-link-type="biblio">[selectors-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-document-language" style="color:initial">document language</span>
     <li><span class="dfn-paneled" id="term-for-pseudo-element" style="color:initial">pseudo-element</span>
    </ul>
   <li>
    <a data-link-type="biblio">[SVG2]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-container-element" style="color:initial">container element</span>
     <li><span class="dfn-paneled" id="term-for-TermNonRenderedElement" style="color:initial">non-rendered element</span>
     <li><span class="dfn-paneled" id="term-for-elementdef-pattern" style="color:initial">pattern</span>
     <li><span class="dfn-paneled" id="term-for-TermPresentationAttribute" style="color:initial">presentation attributes</span>
     <li><span class="dfn-paneled" id="term-for-TermRenderableElement" style="color:initial">renderable element</span>
     <li><span class="dfn-paneled" id="term-for-TermRenderedElement" style="color:initial">rendered element</span>
     <li><span class="dfn-paneled" id="term-for-elementdef-svg" style="color:initial">svg</span>
     <li><span class="dfn-paneled" id="term-for-elementdef-symbol" style="color:initial">symbol</span>
     <li><span class="dfn-paneled" id="term-for-elementdef-text" style="color:initial">text</span>
     <li><span class="dfn-paneled" id="term-for-TermTextContentChildElement" style="color:initial">text content child element</span>
     <li><span class="dfn-paneled" id="term-for-elementdef-textPath" style="color:initial">textpath</span>
     <li><span class="dfn-paneled" id="term-for-elementdef-tspan" style="color:initial">tspan</span>
     <li><span class="dfn-paneled" id="term-for-elementdef-use" style="color:initial">use</span>
    </ul>
  </ul>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
  <dl>
   <dt id="biblio-css-align-3">[CSS-ALIGN-3]
   <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-align-3/">CSS Box Alignment Module Level 3</a>. 6 December 2018. WD. URL: <a href="https://www.w3.org/TR/css-align-3/">https://www.w3.org/TR/css-align-3/</a>
   <dt id="biblio-css-backgrounds-3">[CSS-BACKGROUNDS-3]
   <dd>Bert Bos; Elika Etemad; Brad Kemper. <a href="https://www.w3.org/TR/css-backgrounds-3/">CSS Backgrounds and Borders Module Level 3</a>. 17 October 2017. CR. URL: <a href="https://www.w3.org/TR/css-backgrounds-3/">https://www.w3.org/TR/css-backgrounds-3/</a>
   <dt id="biblio-css-break-4">[CSS-BREAK-4]
   <dd>Rossen Atanassov; Elika Etemad. <a href="https://www.w3.org/TR/css-break-4/">CSS Fragmentation Module Level 4</a>. 18 December 2018. WD. URL: <a href="https://www.w3.org/TR/css-break-4/">https://www.w3.org/TR/css-break-4/</a>
   <dt id="biblio-css-cascade-4">[CSS-CASCADE-4]
   <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-cascade-4/">CSS Cascading and Inheritance Level 4</a>. 28 August 2018. CR. URL: <a href="https://www.w3.org/TR/css-cascade-4/">https://www.w3.org/TR/css-cascade-4/</a>
   <dt id="biblio-css-contain-1">[CSS-CONTAIN-1]
   <dd>Tab Atkins Jr.; Florian Rivoal. <a href="https://www.w3.org/TR/css-contain-1/">CSS Containment Module Level 1</a>. 30 April 2019. CR. URL: <a href="https://www.w3.org/TR/css-contain-1/">https://www.w3.org/TR/css-contain-1/</a>
   <dt id="biblio-css-grid-2">[CSS-GRID-2]
   <dd>Tab Atkins Jr.; Elika Etemad; Rossen Atanassov. <a href="https://www.w3.org/TR/css-grid-2/">CSS Grid Layout Module Level 2</a>. 4 August 2018. WD. URL: <a href="https://www.w3.org/TR/css-grid-2/">https://www.w3.org/TR/css-grid-2/</a>
   <dt id="biblio-css-inline-3">[CSS-INLINE-3]
   <dd>Dave Cramer; Elika Etemad; Steve Zilles. <a href="https://www.w3.org/TR/css-inline-3/">CSS Inline Layout Module Level 3</a>. 8 August 2018. WD. URL: <a href="https://www.w3.org/TR/css-inline-3/">https://www.w3.org/TR/css-inline-3/</a>
   <dt id="biblio-css-overflow-3">[CSS-OVERFLOW-3]
   <dd>David Baron; Elika Etemad; Florian Rivoal. <a href="https://www.w3.org/TR/css-overflow-3/">CSS Overflow Module Level 3</a>. 31 July 2018. WD. URL: <a href="https://www.w3.org/TR/css-overflow-3/">https://www.w3.org/TR/css-overflow-3/</a>
   <dt id="biblio-css-position-3">[CSS-POSITION-3]
   <dd>Rossen Atanassov; Arron Eicholz. <a href="https://www.w3.org/TR/css-position-3/">CSS Positioned Layout Module Level 3</a>. 17 May 2016. WD. URL: <a href="https://www.w3.org/TR/css-position-3/">https://www.w3.org/TR/css-position-3/</a>
   <dt id="biblio-css-pseudo-4">[CSS-PSEUDO-4]
   <dd>Daniel Glazman; Elika Etemad; Alan Stearns. <a href="https://www.w3.org/TR/css-pseudo-4/">CSS Pseudo-Elements Module Level 4</a>. 25 February 2019. WD. URL: <a href="https://www.w3.org/TR/css-pseudo-4/">https://www.w3.org/TR/css-pseudo-4/</a>
   <dt id="biblio-css-speech-1">[CSS-SPEECH-1]
   <dd>Daniel Weck. <a href="https://www.w3.org/TR/css3-speech/">CSS Speech Module</a>. 5 June 2018. NOTE. URL: <a href="https://www.w3.org/TR/css3-speech/">https://www.w3.org/TR/css3-speech/</a>
   <dt id="biblio-css-tables-3">[CSS-TABLES-3]
   <dd>Greg Whitworth. <a href="https://www.w3.org/TR/css-tables-3/">CSS Table Module Level 3</a>. 7 March 2017. WD. URL: <a href="https://www.w3.org/TR/css-tables-3/">https://www.w3.org/TR/css-tables-3/</a>
   <dt id="biblio-css-text-3">[CSS-TEXT-3]
   <dd>Elika Etemad; Koji Ishii; Florian Rivoal. <a href="https://www.w3.org/TR/css-text-3/">CSS Text Module Level 3</a>. 12 December 2018. WD. URL: <a href="https://www.w3.org/TR/css-text-3/">https://www.w3.org/TR/css-text-3/</a>
   <dt id="biblio-css-values-3">[CSS-VALUES-3]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-3/">CSS Values and Units Module Level 3</a>. 31 January 2019. CR. URL: <a href="https://www.w3.org/TR/css-values-3/">https://www.w3.org/TR/css-values-3/</a>
   <dt id="biblio-css-values-4">[CSS-VALUES-4]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-4/">CSS Values and Units Module Level 4</a>. 31 January 2019. WD. URL: <a href="https://www.w3.org/TR/css-values-4/">https://www.w3.org/TR/css-values-4/</a>
   <dt id="biblio-css2">[CSS2]
   <dd>Bert Bos; et al. <a href="https://www.w3.org/TR/CSS2/">Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. REC. URL: <a href="https://www.w3.org/TR/CSS2/">https://www.w3.org/TR/CSS2/</a>
   <dt id="biblio-css3-break">[CSS3-BREAK]
   <dd>Rossen Atanassov; Elika Etemad. <a href="https://www.w3.org/TR/css-break-3/">CSS Fragmentation Module Level 3</a>. 4 December 2018. CR. URL: <a href="https://www.w3.org/TR/css-break-3/">https://www.w3.org/TR/css-break-3/</a>
   <dt id="biblio-css3-cascade">[CSS3-CASCADE]
   <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-cascade-3/">CSS Cascading and Inheritance Level 3</a>. 28 August 2018. CR. URL: <a href="https://www.w3.org/TR/css-cascade-3/">https://www.w3.org/TR/css-cascade-3/</a>
   <dt id="biblio-css3-flexbox">[CSS3-FLEXBOX]
   <dd>Tab Atkins Jr.; et al. <a href="https://www.w3.org/TR/css-flexbox-1/">CSS Flexible Box Layout Module Level 1</a>. 19 November 2018. CR. URL: <a href="https://www.w3.org/TR/css-flexbox-1/">https://www.w3.org/TR/css-flexbox-1/</a>
   <dt id="biblio-css3-grid-layout">[CSS3-GRID-LAYOUT]
   <dd>Tab Atkins Jr.; Elika Etemad; Rossen Atanassov. <a href="https://www.w3.org/TR/css-grid-1/">CSS Grid Layout Module Level 1</a>. 14 December 2017. CR. URL: <a href="https://www.w3.org/TR/css-grid-1/">https://www.w3.org/TR/css-grid-1/</a>
   <dt id="biblio-css3page">[CSS3PAGE]
   <dd>Elika Etemad; Simon Sapin. <a href="https://www.w3.org/TR/css-page-3/">CSS Paged Media Module Level 3</a>. 18 October 2018. WD. URL: <a href="https://www.w3.org/TR/css-page-3/">https://www.w3.org/TR/css-page-3/</a>
   <dt id="biblio-css3ruby">[CSS3RUBY]
   <dd>Elika Etemad; Koji Ishii. <a href="https://www.w3.org/TR/css-ruby-1/">CSS Ruby Layout Module Level 1</a>. 5 August 2014. WD. URL: <a href="https://www.w3.org/TR/css-ruby-1/">https://www.w3.org/TR/css-ruby-1/</a>
   <dt id="biblio-cssom">[CSSOM]
   <dd>Simon Pieters; Glenn Adams. <a href="https://www.w3.org/TR/cssom-1/">CSS Object Model (CSSOM)</a>. 17 March 2016. WD. URL: <a href="https://www.w3.org/TR/cssom-1/">https://www.w3.org/TR/cssom-1/</a>
   <dt id="biblio-html">[HTML]
   <dd>Anne van Kesteren; et al. <a href="https://html.spec.whatwg.org/multipage/">HTML Standard</a>. Living Standard. URL: <a href="https://html.spec.whatwg.org/multipage/">https://html.spec.whatwg.org/multipage/</a>
   <dt id="biblio-rfc2119">[RFC2119]
   <dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a>
   <dt id="biblio-selectors-4">[SELECTORS-4]
   <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/selectors-4/">Selectors Level 4</a>. 21 November 2018. WD. URL: <a href="https://www.w3.org/TR/selectors-4/">https://www.w3.org/TR/selectors-4/</a>
   <dt id="biblio-svg2">[SVG2]
   <dd>Amelia Bellamy-Royds; et al. <a href="https://www.w3.org/TR/SVG2/">Scalable Vector Graphics (SVG) 2</a>. 4 October 2018. CR. URL: <a href="https://www.w3.org/TR/SVG2/">https://www.w3.org/TR/SVG2/</a>
  </dl>
  <h3 class="no-num no-ref heading settled" id="informative"><span class="content">Informative References</span><a class="self-link" href="#informative"></a></h3>
  <dl>
   <dt id="biblio-css3-exclusions">[CSS3-EXCLUSIONS]
   <dd>Rossen Atanassov; Vincent Hardy; Alan Stearns. <a href="https://www.w3.org/TR/css3-exclusions/">CSS Exclusions Module Level 1</a>. 15 January 2015. WD. URL: <a href="https://www.w3.org/TR/css3-exclusions/">https://www.w3.org/TR/css3-exclusions/</a>
  </dl>
  <h2 class="no-num no-ref heading settled" id="property-index"><span class="content">Property Index</span><a class="self-link" href="#property-index"></a></h2>
  <div class="big-element-wrapper">
   <table class="index">
    <thead>
     <tr>
      <th scope="col">Name
      <th scope="col">Value
      <th scope="col">Initial
      <th scope="col">Applies to
      <th scope="col">Inh.
      <th scope="col">%ages
      <th scope="col">Anim­ation type
      <th scope="col">Canonical order
      <th scope="col">Com­puted value
    <tbody>
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-display" id="ref-for-propdef-display⑥⑦">display</a>
      <td>[ &lt;display-outside> || &lt;display-inside> ] | &lt;display-listitem> | &lt;display-internal> | &lt;display-box> | &lt;display-legacy>
      <td>inline
      <td>all elements
      <td>no
      <td>n/a
      <td>not animatable
      <td>per grammar
      <td>see prose in a variety of specs
   </table>
  </div>
  <aside class="dfn-panel" data-for="element-tree">
   <b><a href="#element-tree">#element-tree</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-element-tree">1. 
Introduction</a>
    <li><a href="#ref-for-element-tree①">2.5. 
Box Generation: the none and contents keywords</a>
    <li><a href="#ref-for-element-tree②"> Changes Prior to Candidate Recommendation Status</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="elements">
   <b><a href="#elements">#elements</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-elements">1. 
Introduction</a> <a href="#ref-for-elements①">(2)</a> <a href="#ref-for-elements②">(3)</a> <a href="#ref-for-elements③">(4)</a> <a href="#ref-for-elements④">(5)</a>
    <li><a href="#ref-for-elements⑤">2.5. 
Box Generation: the none and contents keywords</a>
    <li><a href="#ref-for-elements⑥"> Appendix A: Glossary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="text-nodes">
   <b><a href="#text-nodes">#text-nodes</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-text-nodes">1. 
Introduction</a> <a href="#ref-for-text-nodes①">(2)</a> <a href="#ref-for-text-nodes②">(3)</a> <a href="#ref-for-text-nodes③">(4)</a>
    <li><a href="#ref-for-text-nodes④">2.5. 
Box Generation: the none and contents keywords</a>
    <li><a href="#ref-for-text-nodes⑤"> Changes Prior to Candidate Recommendation Status</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="box-tree">
   <b><a href="#box-tree">#box-tree</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-box-tree">1. 
Introduction</a> <a href="#ref-for-box-tree①">(2)</a> <a href="#ref-for-box-tree②">(3)</a> <a href="#ref-for-box-tree③">(4)</a> <a href="#ref-for-box-tree④">(5)</a> <a href="#ref-for-box-tree⑤">(6)</a> <a href="#ref-for-box-tree⑥">(7)</a>
    <li><a href="#ref-for-box-tree⑦">2. 
Box Layout Modes: the display property</a> <a href="#ref-for-box-tree⑧">(2)</a>
    <li><a href="#ref-for-box-tree⑨"> Changes Prior to Candidate Recommendation Status</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="box">
   <b><a href="#box">#box</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-box">1. 
Introduction</a> <a href="#ref-for-box①">(2)</a> <a href="#ref-for-box②">(3)</a> <a href="#ref-for-box③">(4)</a> <a href="#ref-for-box④">(5)</a> <a href="#ref-for-box⑤">(6)</a> <a href="#ref-for-box⑥">(7)</a> <a href="#ref-for-box⑦">(8)</a> <a href="#ref-for-box⑧">(9)</a>
    <li><a href="#ref-for-box⑨">2.5. 
Box Generation: the none and contents keywords</a> <a href="#ref-for-box①⓪">(2)</a>
    <li><a href="#ref-for-box①①"> Appendix A: Glossary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="text-run">
   <b><a href="#text-run">#text-run</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-text-run">1. 
Introduction</a> <a href="#ref-for-text-run①">(2)</a> <a href="#ref-for-text-run②">(3)</a> <a href="#ref-for-text-run③">(4)</a> <a href="#ref-for-text-run④">(5)</a>
    <li><a href="#ref-for-text-run⑤">2. 
Box Layout Modes: the display property</a>
    <li><a href="#ref-for-text-run⑥">2.5. 
Box Generation: the none and contents keywords</a> <a href="#ref-for-text-run⑦">(2)</a> <a href="#ref-for-text-run⑧">(3)</a>
    <li><a href="#ref-for-text-run⑨"> Appendix A: Glossary</a>
    <li><a href="#ref-for-text-run①⓪"> Changes Prior to Candidate Recommendation Status</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="css-parent-box">
   <b><a href="#css-parent-box">#css-parent-box</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-css-parent-box"> Changes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="anonymous">
   <b><a href="#anonymous">#anonymous</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-anonymous">1. 
Introduction</a> <a href="#ref-for-anonymous①">(2)</a> <a href="#ref-for-anonymous②">(3)</a>
    <li><a href="#ref-for-anonymous③"> Appendix C: Box Construction Guidelines for Spec Authors</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-display">
   <b><a href="#propdef-display">#propdef-display</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-display③">1. 
Introduction</a> <a href="#ref-for-propdef-display④">(2)</a> <a href="#ref-for-propdef-display⑤">(3)</a> <a href="#ref-for-propdef-display⑥">(4)</a> <a href="#ref-for-propdef-display⑦">(5)</a> <a href="#ref-for-propdef-display⑧">(6)</a>
    <li><a href="#ref-for-propdef-display⑨">1.1. 
Module interactions</a>
    <li><a href="#ref-for-propdef-display①⓪">2. 
Box Layout Modes: the display property</a> <a href="#ref-for-propdef-display①①">(2)</a> <a href="#ref-for-propdef-display①②">(3)</a> <a href="#ref-for-propdef-display①③">(4)</a> <a href="#ref-for-propdef-display①④">(5)</a> <a href="#ref-for-propdef-display①⑤">(6)</a> <a href="#ref-for-propdef-display①⑥">(7)</a> <a href="#ref-for-propdef-display①⑦">(8)</a> <a href="#ref-for-propdef-display①⑧">(9)</a> <a href="#ref-for-propdef-display①⑨">(10)</a>
    <li><a href="#ref-for-propdef-display②⓪">2.4. 
Layout-Internal Display Types: the table-* and ruby-* keywords</a> <a href="#ref-for-propdef-display②①">(2)</a>
    <li><a href="#ref-for-propdef-display②②">2.5. 
Box Generation: the none and contents keywords</a> <a href="#ref-for-propdef-display②③">(2)</a> <a href="#ref-for-propdef-display②④">(3)</a> <a href="#ref-for-propdef-display②⑤">(4)</a> <a href="#ref-for-propdef-display②⑥">(5)</a>
    <li><a href="#ref-for-propdef-display②⑦">2.6. 
Precomposed Inline-level Display Values</a>
    <li><a href="#ref-for-propdef-display②⑧">2.7. 
Automatic Box Type Transformations</a> <a href="#ref-for-propdef-display②⑨">(2)</a> <a href="#ref-for-propdef-display③⓪">(3)</a>
    <li><a href="#ref-for-propdef-display③①"> Appendix A: Glossary</a> <a href="#ref-for-propdef-display③②">(2)</a> <a href="#ref-for-propdef-display③③">(3)</a>
    <li><a href="#ref-for-propdef-display③④"> Appendix B: Effects of display: contents on Unusual Elements</a> <a href="#ref-for-propdef-display③⑤">(2)</a>
    <li><a href="#ref-for-propdef-display③⑥">HTML Elements</a> <a href="#ref-for-propdef-display③⑦">(2)</a> <a href="#ref-for-propdef-display③⑧">(3)</a> <a href="#ref-for-propdef-display③⑨">(4)</a> <a href="#ref-for-propdef-display④⓪">(5)</a> <a href="#ref-for-propdef-display④①">(6)</a>
    <li><a href="#ref-for-propdef-display④②">SVG Elements</a> <a href="#ref-for-propdef-display④③">(2)</a> <a href="#ref-for-propdef-display④④">(3)</a> <a href="#ref-for-propdef-display④⑤">(4)</a> <a href="#ref-for-propdef-display④⑥">(5)</a> <a href="#ref-for-propdef-display④⑦">(6)</a> <a href="#ref-for-propdef-display④⑧">(7)</a> <a href="#ref-for-propdef-display④⑨">(8)</a>
    <li><a href="#ref-for-propdef-display⑤⓪">MathML Elements</a> <a href="#ref-for-propdef-display⑤①">(2)</a>
    <li><a href="#ref-for-propdef-display⑤②"> Changes Prior to Candidate Recommendation Status</a> <a href="#ref-for-propdef-display⑤③">(2)</a> <a href="#ref-for-propdef-display⑤④">(3)</a> <a href="#ref-for-propdef-display⑤⑤">(4)</a> <a href="#ref-for-propdef-display⑤⑥">(5)</a> <a href="#ref-for-propdef-display⑤⑦">(6)</a> <a href="#ref-for-propdef-display⑤⑧">(7)</a> <a href="#ref-for-propdef-display⑤⑨">(8)</a> <a href="#ref-for-propdef-display⑥⓪">(9)</a> <a href="#ref-for-propdef-display⑥①">(10)</a> <a href="#ref-for-propdef-display⑥②">(11)</a> <a href="#ref-for-propdef-display⑥③">(12)</a> <a href="#ref-for-propdef-display⑥④">(13)</a> <a href="#ref-for-propdef-display⑥⑤">(14)</a> <a href="#ref-for-propdef-display⑥⑥">(15)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="display-type">
   <b><a href="#display-type">#display-type</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-display-type">1. 
Introduction</a>
    <li><a href="#ref-for-display-type①">2. 
Box Layout Modes: the display property</a>
    <li><a href="#ref-for-display-type②">2.7. 
Automatic Box Type Transformations</a>
    <li><a href="#ref-for-display-type③"> Changes Prior to Candidate Recommendation Status</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="inner-display-type">
   <b><a href="#inner-display-type">#inner-display-type</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-inner-display-type">2.1. 
Outer Display Roles for Flow Layout: the block, inline, and run-in keywords</a>
    <li><a href="#ref-for-inner-display-type①">2.2. 
Inner Display Layout Models: the flow, flow-root, table, flex, grid, and ruby keywords</a> <a href="#ref-for-inner-display-type②">(2)</a>
    <li><a href="#ref-for-inner-display-type③">2.3. 
Generating Marker Boxes: the list-item keyword</a> <a href="#ref-for-inner-display-type④">(2)</a>
    <li><a href="#ref-for-inner-display-type⑤">2.4. 
Layout-Internal Display Types: the table-* and ruby-* keywords</a> <a href="#ref-for-inner-display-type⑥">(2)</a> <a href="#ref-for-inner-display-type⑦">(3)</a> <a href="#ref-for-inner-display-type⑧">(4)</a>
    <li><a href="#ref-for-inner-display-type⑨">2.5. 
Box Generation: the none and contents keywords</a>
    <li><a href="#ref-for-inner-display-type①⓪">2.7. 
Automatic Box Type Transformations</a> <a href="#ref-for-inner-display-type①①">(2)</a>
    <li><a href="#ref-for-inner-display-type①②">3. 
Run-In Layout</a>
    <li><a href="#ref-for-inner-display-type①③"> Appendix A: Glossary</a> <a href="#ref-for-inner-display-type①④">(2)</a> <a href="#ref-for-inner-display-type①⑤">(3)</a> <a href="#ref-for-inner-display-type①⑥">(4)</a>
    <li><a href="#ref-for-inner-display-type①⑦"> Changes Prior to Candidate Recommendation Status</a> <a href="#ref-for-inner-display-type①⑧">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="outer-display-type">
   <b><a href="#outer-display-type">#outer-display-type</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-outer-display-type">2.1. 
Outer Display Roles for Flow Layout: the block, inline, and run-in keywords</a>
    <li><a href="#ref-for-outer-display-type①">2.2. 
Inner Display Layout Models: the flow, flow-root, table, flex, grid, and ruby keywords</a> <a href="#ref-for-outer-display-type②">(2)</a> <a href="#ref-for-outer-display-type③">(3)</a>
    <li><a href="#ref-for-outer-display-type④">2.3. 
Generating Marker Boxes: the list-item keyword</a> <a href="#ref-for-outer-display-type⑤">(2)</a>
    <li><a href="#ref-for-outer-display-type⑥">2.4. 
Layout-Internal Display Types: the table-* and ruby-* keywords</a>
    <li><a href="#ref-for-outer-display-type⑦">2.5. 
Box Generation: the none and contents keywords</a>
    <li><a href="#ref-for-outer-display-type⑧">2.7. 
Automatic Box Type Transformations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-display-outside">
   <b><a href="#typedef-display-outside">#typedef-display-outside</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-display-outside">2. 
Box Layout Modes: the display property</a> <a href="#ref-for-typedef-display-outside①">(2)</a>
    <li><a href="#ref-for-typedef-display-outside②">2.1. 
Outer Display Roles for Flow Layout: the block, inline, and run-in keywords</a> <a href="#ref-for-typedef-display-outside③">(2)</a>
    <li><a href="#ref-for-typedef-display-outside④">2.2. 
Inner Display Layout Models: the flow, flow-root, table, flex, grid, and ruby keywords</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-display-inside">
   <b><a href="#typedef-display-inside">#typedef-display-inside</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-display-inside">2. 
Box Layout Modes: the display property</a>
    <li><a href="#ref-for-typedef-display-inside①">2.1. 
Outer Display Roles for Flow Layout: the block, inline, and run-in keywords</a>
    <li><a href="#ref-for-typedef-display-inside②">2.2. 
Inner Display Layout Models: the flow, flow-root, table, flex, grid, and ruby keywords</a> <a href="#ref-for-typedef-display-inside③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-display-listitem">
   <b><a href="#typedef-display-listitem">#typedef-display-listitem</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-display-listitem">2. 
Box Layout Modes: the display property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-display-internal">
   <b><a href="#typedef-display-internal">#typedef-display-internal</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-display-internal">2. 
Box Layout Modes: the display property</a> <a href="#ref-for-typedef-display-internal①">(2)</a>
    <li><a href="#ref-for-typedef-display-internal②">2.4. 
Layout-Internal Display Types: the table-* and ruby-* keywords</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-display-box">
   <b><a href="#typedef-display-box">#typedef-display-box</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-display-box">2. 
Box Layout Modes: the display property</a>
    <li><a href="#ref-for-typedef-display-box①">2.5. 
Box Generation: the none and contents keywords</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="typedef-display-legacy">
   <b><a href="#typedef-display-legacy">#typedef-display-legacy</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-display-legacy">2. 
Box Layout Modes: the display property</a>
    <li><a href="#ref-for-typedef-display-legacy①">2.6. 
Precomposed Inline-level Display Values</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-display-block">
   <b><a href="#valdef-display-block">#valdef-display-block</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-display-block">2. 
Box Layout Modes: the display property</a>
    <li><a href="#ref-for-valdef-display-block①">2.1. 
Outer Display Roles for Flow Layout: the block, inline, and run-in keywords</a>
    <li><a href="#ref-for-valdef-display-block②">2.2. 
Inner Display Layout Models: the flow, flow-root, table, flex, grid, and ruby keywords</a>
    <li><a href="#ref-for-valdef-display-block③">2.3. 
Generating Marker Boxes: the list-item keyword</a> <a href="#ref-for-valdef-display-block④">(2)</a>
    <li><a href="#ref-for-valdef-display-block⑤">2.7. 
Automatic Box Type Transformations</a> <a href="#ref-for-valdef-display-block⑥">(2)</a> <a href="#ref-for-valdef-display-block⑦">(3)</a> <a href="#ref-for-valdef-display-block⑧">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="block-level-box">
   <b><a href="#block-level-box">#block-level-box</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-block-level-box"> Appendix A: Glossary</a> <a href="#ref-for-block-level-box①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-display-inline">
   <b><a href="#valdef-display-inline">#valdef-display-inline</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-display-inline">2. 
Box Layout Modes: the display property</a>
    <li><a href="#ref-for-valdef-display-inline①">2.1. 
Outer Display Roles for Flow Layout: the block, inline, and run-in keywords</a>
    <li><a href="#ref-for-valdef-display-inline②">2.2. 
Inner Display Layout Models: the flow, flow-root, table, flex, grid, and ruby keywords</a> <a href="#ref-for-valdef-display-inline③">(2)</a>
    <li><a href="#ref-for-valdef-display-inline④">2.3. 
Generating Marker Boxes: the list-item keyword</a>
    <li><a href="#ref-for-valdef-display-inline⑤">2.7. 
Automatic Box Type Transformations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="inline-level-box">
   <b><a href="#inline-level-box">#inline-level-box</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-inline-level-box">2.1. 
Outer Display Roles for Flow Layout: the block, inline, and run-in keywords</a>
    <li><a href="#ref-for-inline-level-box①">3. 
Run-In Layout</a>
    <li><a href="#ref-for-inline-level-box②"> Appendix A: Glossary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-display-run-in">
   <b><a href="#valdef-display-run-in">#valdef-display-run-in</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-display-run-in">1. 
Introduction</a>
    <li><a href="#ref-for-valdef-display-run-in①">2. 
Box Layout Modes: the display property</a>
    <li><a href="#ref-for-valdef-display-run-in②">2.1. 
Outer Display Roles for Flow Layout: the block, inline, and run-in keywords</a>
    <li><a href="#ref-for-valdef-display-run-in③">2.2. 
Inner Display Layout Models: the flow, flow-root, table, flex, grid, and ruby keywords</a>
    <li><a href="#ref-for-valdef-display-run-in④">2.3. 
Generating Marker Boxes: the list-item keyword</a>
    <li><a href="#ref-for-valdef-display-run-in⑤"> Changes Prior to Candidate Recommendation Status</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-display-flow">
   <b><a href="#valdef-display-flow">#valdef-display-flow</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-display-flow">2.1. 
Outer Display Roles for Flow Layout: the block, inline, and run-in keywords</a>
    <li><a href="#ref-for-valdef-display-flow①">2.2. 
Inner Display Layout Models: the flow, flow-root, table, flex, grid, and ruby keywords</a>
    <li><a href="#ref-for-valdef-display-flow②">2.3. 
Generating Marker Boxes: the list-item keyword</a> <a href="#ref-for-valdef-display-flow③">(2)</a>
    <li><a href="#ref-for-valdef-display-flow④">2.4. 
Layout-Internal Display Types: the table-* and ruby-* keywords</a>
    <li><a href="#ref-for-valdef-display-flow⑤">2.7. 
Automatic Box Type Transformations</a>
    <li><a href="#ref-for-valdef-display-flow⑥">3. 
Run-In Layout</a>
    <li><a href="#ref-for-valdef-display-flow⑦"> Appendix A: Glossary</a> <a href="#ref-for-valdef-display-flow⑧">(2)</a>
    <li><a href="#ref-for-valdef-display-flow⑨"> Changes Prior to Candidate Recommendation Status</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="flow-layout">
   <b><a href="#flow-layout">#flow-layout</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-flow-layout">2. 
Box Layout Modes: the display property</a>
    <li><a href="#ref-for-flow-layout①">2.1. 
Outer Display Roles for Flow Layout: the block, inline, and run-in keywords</a> <a href="#ref-for-flow-layout②">(2)</a> <a href="#ref-for-flow-layout③">(3)</a>
    <li><a href="#ref-for-flow-layout④">2.2. 
Inner Display Layout Models: the flow, flow-root, table, flex, grid, and ruby keywords</a>
    <li><a href="#ref-for-flow-layout⑤">2.3. 
Generating Marker Boxes: the list-item keyword</a>
    <li><a href="#ref-for-flow-layout⑥"> Changes Prior to Candidate Recommendation Status</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-display-flow-root">
   <b><a href="#valdef-display-flow-root">#valdef-display-flow-root</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-display-flow-root">2. 
Box Layout Modes: the display property</a>
    <li><a href="#ref-for-valdef-display-flow-root①">2.2. 
Inner Display Layout Models: the flow, flow-root, table, flex, grid, and ruby keywords</a> <a href="#ref-for-valdef-display-flow-root②">(2)</a>
    <li><a href="#ref-for-valdef-display-flow-root③">2.3. 
Generating Marker Boxes: the list-item keyword</a>
    <li><a href="#ref-for-valdef-display-flow-root④">2.4. 
Layout-Internal Display Types: the table-* and ruby-* keywords</a> <a href="#ref-for-valdef-display-flow-root⑤">(2)</a>
    <li><a href="#ref-for-valdef-display-flow-root⑥">2.7. 
Automatic Box Type Transformations</a> <a href="#ref-for-valdef-display-flow-root⑦">(2)</a>
    <li><a href="#ref-for-valdef-display-flow-root⑧"> Changes Prior to Candidate Recommendation Status</a> <a href="#ref-for-valdef-display-flow-root⑨">(2)</a> <a href="#ref-for-valdef-display-flow-root①⓪">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-display-table">
   <b><a href="#valdef-display-table">#valdef-display-table</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-display-table">2. 
Box Layout Modes: the display property</a>
    <li><a href="#ref-for-valdef-display-table①">2.2. 
Inner Display Layout Models: the flow, flow-root, table, flex, grid, and ruby keywords</a>
    <li><a href="#ref-for-valdef-display-table②">2.4. 
Layout-Internal Display Types: the table-* and ruby-* keywords</a>
    <li><a href="#ref-for-valdef-display-table③"> Appendix A: Glossary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-display-flex">
   <b><a href="#valdef-display-flex">#valdef-display-flex</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-display-flex">2. 
Box Layout Modes: the display property</a>
    <li><a href="#ref-for-valdef-display-flex①">2.2. 
Inner Display Layout Models: the flow, flow-root, table, flex, grid, and ruby keywords</a>
    <li><a href="#ref-for-valdef-display-flex②">2.7. 
Automatic Box Type Transformations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-display-grid">
   <b><a href="#valdef-display-grid">#valdef-display-grid</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-display-grid">2. 
Box Layout Modes: the display property</a>
    <li><a href="#ref-for-valdef-display-grid①">2.2. 
Inner Display Layout Models: the flow, flow-root, table, flex, grid, and ruby keywords</a>
    <li><a href="#ref-for-valdef-display-grid②">2.7. 
Automatic Box Type Transformations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-display-ruby">
   <b><a href="#valdef-display-ruby">#valdef-display-ruby</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-display-ruby">2. 
Box Layout Modes: the display property</a>
    <li><a href="#ref-for-valdef-display-ruby①">2.2. 
Inner Display Layout Models: the flow, flow-root, table, flex, grid, and ruby keywords</a> <a href="#ref-for-valdef-display-ruby②">(2)</a>
    <li><a href="#ref-for-valdef-display-ruby③">2.4. 
Layout-Internal Display Types: the table-* and ruby-* keywords</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-display-list-item">
   <b><a href="#valdef-display-list-item">#valdef-display-list-item</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-display-list-item">2. 
Box Layout Modes: the display property</a> <a href="#ref-for-valdef-display-list-item①">(2)</a>
    <li><a href="#ref-for-valdef-display-list-item②">2.3. 
Generating Marker Boxes: the list-item keyword</a>
    <li><a href="#ref-for-valdef-display-list-item③"> Appendix A: Glossary</a>
    <li><a href="#ref-for-valdef-display-list-item④"> Changes Prior to Candidate Recommendation Status</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="layout-internal">
   <b><a href="#layout-internal">#layout-internal</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-layout-internal">2.7. 
Automatic Box Type Transformations</a> <a href="#ref-for-layout-internal①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-display-table-row">
   <b><a href="#valdef-display-table-row">#valdef-display-table-row</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-display-table-row">2.4. 
Layout-Internal Display Types: the table-* and ruby-* keywords</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-display-table-cell">
   <b><a href="#valdef-display-table-cell">#valdef-display-table-cell</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-display-table-cell">2.4. 
Layout-Internal Display Types: the table-* and ruby-* keywords</a> <a href="#ref-for-valdef-display-table-cell①">(2)</a>
    <li><a href="#ref-for-valdef-display-table-cell②"> Changes Prior to Candidate Recommendation Status</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="internal-table-element">
   <b><a href="#internal-table-element">#internal-table-element</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-internal-table-element">2.4. 
Layout-Internal Display Types: the table-* and ruby-* keywords</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-display-table-caption">
   <b><a href="#valdef-display-table-caption">#valdef-display-table-caption</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-display-table-caption">2.4. 
Layout-Internal Display Types: the table-* and ruby-* keywords</a>
    <li><a href="#ref-for-valdef-display-table-caption①"> Changes Prior to Candidate Recommendation Status</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-display-ruby-base">
   <b><a href="#valdef-display-ruby-base">#valdef-display-ruby-base</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-display-ruby-base">2.4. 
Layout-Internal Display Types: the table-* and ruby-* keywords</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-display-ruby-text">
   <b><a href="#valdef-display-ruby-text">#valdef-display-ruby-text</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-display-ruby-text">2.4. 
Layout-Internal Display Types: the table-* and ruby-* keywords</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-display-contents">
   <b><a href="#valdef-display-contents">#valdef-display-contents</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-display-contents">1. 
Introduction</a>
    <li><a href="#ref-for-valdef-display-contents①">2. 
Box Layout Modes: the display property</a>
    <li><a href="#ref-for-valdef-display-contents②">2.5. 
Box Generation: the none and contents keywords</a>
    <li><a href="#ref-for-valdef-display-contents③">2.7. 
Automatic Box Type Transformations</a> <a href="#ref-for-valdef-display-contents④">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-display-none">
   <b><a href="#valdef-display-none">#valdef-display-none</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-display-none">1. 
Introduction</a>
    <li><a href="#ref-for-valdef-display-none①">2. 
Box Layout Modes: the display property</a> <a href="#ref-for-valdef-display-none②">(2)</a> <a href="#ref-for-valdef-display-none③">(3)</a>
    <li><a href="#ref-for-valdef-display-none④">2.5. 
Box Generation: the none and contents keywords</a>
    <li><a href="#ref-for-valdef-display-none⑤">2.7. 
Automatic Box Type Transformations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-display-inline-block">
   <b><a href="#valdef-display-inline-block">#valdef-display-inline-block</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-display-inline-block">2. 
Box Layout Modes: the display property</a>
    <li><a href="#ref-for-valdef-display-inline-block①">2.7. 
Automatic Box Type Transformations</a>
    <li><a href="#ref-for-valdef-display-inline-block②"> Appendix A: Glossary</a>
    <li><a href="#ref-for-valdef-display-inline-block③"> Changes Prior to Candidate Recommendation Status</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-display-inline-table">
   <b><a href="#valdef-display-inline-table">#valdef-display-inline-table</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-display-inline-table">2. 
Box Layout Modes: the display property</a>
    <li><a href="#ref-for-valdef-display-inline-table①"> Appendix A: Glossary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-display-inline-flex">
   <b><a href="#valdef-display-inline-flex">#valdef-display-inline-flex</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-display-inline-flex">2. 
Box Layout Modes: the display property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-display-inline-grid">
   <b><a href="#valdef-display-inline-grid">#valdef-display-inline-grid</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-display-inline-grid">2. 
Box Layout Modes: the display property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="blockify">
   <b><a href="#blockify">#blockify</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-blockify">2.7. 
Automatic Box Type Transformations</a> <a href="#ref-for-blockify①">(2)</a> <a href="#ref-for-blockify②">(3)</a> <a href="#ref-for-blockify③">(4)</a> <a href="#ref-for-blockify④">(5)</a> <a href="#ref-for-blockify⑤">(6)</a> <a href="#ref-for-blockify⑥">(7)</a>
    <li><a href="#ref-for-blockify⑦"> Appendix A: Glossary</a>
    <li><a href="#ref-for-blockify⑧"> Appendix C: Box Construction Guidelines for Spec Authors</a> <a href="#ref-for-blockify⑨">(2)</a> <a href="#ref-for-blockify①⓪">(3)</a> <a href="#ref-for-blockify①①">(4)</a>
    <li><a href="#ref-for-blockify①②"> Changes Prior to Candidate Recommendation Status</a> <a href="#ref-for-blockify①③">(2)</a> <a href="#ref-for-blockify①④">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="inlinify">
   <b><a href="#inlinify">#inlinify</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-inlinify">2.7. 
Automatic Box Type Transformations</a> <a href="#ref-for-inlinify①">(2)</a> <a href="#ref-for-inlinify②">(3)</a> <a href="#ref-for-inlinify③">(4)</a> <a href="#ref-for-inlinify④">(5)</a> <a href="#ref-for-inlinify⑤">(6)</a>
    <li><a href="#ref-for-inlinify⑥">3. 
Run-In Layout</a>
    <li><a href="#ref-for-inlinify⑦"> Appendix C: Box Construction Guidelines for Spec Authors</a> <a href="#ref-for-inlinify⑧">(2)</a>
    <li><a href="#ref-for-inlinify⑨"> Changes Prior to Candidate Recommendation Status</a> <a href="#ref-for-inlinify①⓪">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="run-in">
   <b><a href="#run-in">#run-in</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-run-in">2. 
Box Layout Modes: the display property</a>
    <li><a href="#ref-for-run-in①">2.1. 
Outer Display Roles for Flow Layout: the block, inline, and run-in keywords</a>
    <li><a href="#ref-for-run-in②">3. 
Run-In Layout</a> <a href="#ref-for-run-in③">(2)</a> <a href="#ref-for-run-in④">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="run-in-sequence">
   <b><a href="#run-in-sequence">#run-in-sequence</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-run-in-sequence">3. 
Run-In Layout</a> <a href="#ref-for-run-in-sequence①">(2)</a> <a href="#ref-for-run-in-sequence②">(3)</a> <a href="#ref-for-run-in-sequence③">(4)</a> <a href="#ref-for-run-in-sequence④">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="principal-box">
   <b><a href="#principal-box">#principal-box</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-principal-box">1. 
Introduction</a> <a href="#ref-for-principal-box①">(2)</a> <a href="#ref-for-principal-box②">(3)</a> <a href="#ref-for-principal-box③">(4)</a> <a href="#ref-for-principal-box④">(5)</a> <a href="#ref-for-principal-box⑤">(6)</a>
    <li><a href="#ref-for-principal-box⑥">2. 
Box Layout Modes: the display property</a>
    <li><a href="#ref-for-principal-box⑦">2.1. 
Outer Display Roles for Flow Layout: the block, inline, and run-in keywords</a>
    <li><a href="#ref-for-principal-box⑧"> Appendix A: Glossary</a> <a href="#ref-for-principal-box⑨">(2)</a>
    <li><a href="#ref-for-principal-box①⓪">HTML Elements</a>
    <li><a href="#ref-for-principal-box①①"> Appendix C: Box Construction Guidelines for Spec Authors</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="inline-level">
   <b><a href="#inline-level">#inline-level</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-inline-level">2. 
Box Layout Modes: the display property</a> <a href="#ref-for-inline-level①">(2)</a> <a href="#ref-for-inline-level②">(3)</a> <a href="#ref-for-inline-level③">(4)</a> <a href="#ref-for-inline-level④">(5)</a>
    <li><a href="#ref-for-inline-level⑤"> Appendix A: Glossary</a> <a href="#ref-for-inline-level⑥">(2)</a>
    <li><a href="#ref-for-inline-level⑦"> Appendix C: Box Construction Guidelines for Spec Authors</a> <a href="#ref-for-inline-level⑧">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="block-level">
   <b><a href="#block-level">#block-level</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-block-level">2. 
Box Layout Modes: the display property</a> <a href="#ref-for-block-level①">(2)</a> <a href="#ref-for-block-level②">(3)</a> <a href="#ref-for-block-level③">(4)</a> <a href="#ref-for-block-level④">(5)</a>
    <li><a href="#ref-for-block-level⑤"> Appendix A: Glossary</a> <a href="#ref-for-block-level⑥">(2)</a>
    <li><a href="#ref-for-block-level⑦"> Appendix C: Box Construction Guidelines for Spec Authors</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="inline-box">
   <b><a href="#inline-box">#inline-box</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-inline-box">1. 
Introduction</a>
    <li><a href="#ref-for-inline-box①">2. 
Box Layout Modes: the display property</a> <a href="#ref-for-inline-box②">(2)</a> <a href="#ref-for-inline-box③">(3)</a>
    <li><a href="#ref-for-inline-box④">2.2. 
Inner Display Layout Models: the flow, flow-root, table, flex, grid, and ruby keywords</a>
    <li><a href="#ref-for-inline-box⑤"> Appendix A: Glossary</a> <a href="#ref-for-inline-box⑥">(2)</a> <a href="#ref-for-inline-box⑦">(3)</a> <a href="#ref-for-inline-box⑧">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="block-container">
   <b><a href="#block-container">#block-container</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-block-container">2. 
Box Layout Modes: the display property</a> <a href="#ref-for-block-container①">(2)</a> <a href="#ref-for-block-container②">(3)</a>
    <li><a href="#ref-for-block-container③">2.2. 
Inner Display Layout Models: the flow, flow-root, table, flex, grid, and ruby keywords</a> <a href="#ref-for-block-container④">(2)</a> <a href="#ref-for-block-container⑤">(3)</a>
    <li><a href="#ref-for-block-container⑥">2.7. 
Automatic Box Type Transformations</a>
    <li><a href="#ref-for-block-container⑦"> Appendix A: Glossary</a> <a href="#ref-for-block-container⑧">(2)</a> <a href="#ref-for-block-container⑨">(3)</a> <a href="#ref-for-block-container①⓪">(4)</a> <a href="#ref-for-block-container①①">(5)</a> <a href="#ref-for-block-container①②">(6)</a> <a href="#ref-for-block-container①③">(7)</a> <a href="#ref-for-block-container①④">(8)</a> <a href="#ref-for-block-container①⑤">(9)</a>
    <li><a href="#ref-for-block-container①⑥"> Appendix C: Box Construction Guidelines for Spec Authors</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="block-box">
   <b><a href="#block-box">#block-box</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-block-box">1. 
Introduction</a>
    <li><a href="#ref-for-block-box①">2. 
Box Layout Modes: the display property</a> <a href="#ref-for-block-box②">(2)</a> <a href="#ref-for-block-box③">(3)</a>
    <li><a href="#ref-for-block-box④">2.4. 
Layout-Internal Display Types: the table-* and ruby-* keywords</a>
    <li><a href="#ref-for-block-box⑤"> Appendix A: Glossary</a> <a href="#ref-for-block-box⑥">(2)</a> <a href="#ref-for-block-box⑦">(3)</a>
    <li><a href="#ref-for-block-box⑧"> Changes Prior to Candidate Recommendation Status</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="block">
   <b><a href="#block">#block</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-block"> Appendix A: Glossary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="replaced-element">
   <b><a href="#replaced-element">#replaced-element</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-replaced-element">2. 
Box Layout Modes: the display property</a> <a href="#ref-for-replaced-element①">(2)</a>
    <li><a href="#ref-for-replaced-element②">2.2. 
Inner Display Layout Models: the flow, flow-root, table, flex, grid, and ruby keywords</a>
    <li><a href="#ref-for-replaced-element③"> Appendix A: Glossary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="containing-block">
   <b><a href="#containing-block">#containing-block</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-containing-block"> Appendix A: Glossary</a> <a href="#ref-for-containing-block①">(2)</a> <a href="#ref-for-containing-block②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="initial-containing-block">
   <b><a href="#initial-containing-block">#initial-containing-block</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-initial-containing-block"> Appendix A: Glossary</a> <a href="#ref-for-initial-containing-block①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="formatting-context">
   <b><a href="#formatting-context">#formatting-context</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-formatting-context">2. 
Box Layout Modes: the display property</a>
    <li><a href="#ref-for-formatting-context①">2.2. 
Inner Display Layout Models: the flow, flow-root, table, flex, grid, and ruby keywords</a> <a href="#ref-for-formatting-context②">(2)</a> <a href="#ref-for-formatting-context③">(3)</a>
    <li><a href="#ref-for-formatting-context④"> Appendix A: Glossary</a> <a href="#ref-for-formatting-context⑤">(2)</a> <a href="#ref-for-formatting-context⑥">(3)</a> <a href="#ref-for-formatting-context⑦">(4)</a> <a href="#ref-for-formatting-context⑧">(5)</a> <a href="#ref-for-formatting-context⑨">(6)</a> <a href="#ref-for-formatting-context①⓪">(7)</a> <a href="#ref-for-formatting-context①①">(8)</a> <a href="#ref-for-formatting-context①②">(9)</a> <a href="#ref-for-formatting-context①③">(10)</a> <a href="#ref-for-formatting-context①④">(11)</a> <a href="#ref-for-formatting-context①⑤">(12)</a>
    <li><a href="#ref-for-formatting-context①⑥"> Changes Prior to Candidate Recommendation Status</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="independent-formatting-context">
   <b><a href="#independent-formatting-context">#independent-formatting-context</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-independent-formatting-context"> Appendix A: Glossary</a> <a href="#ref-for-independent-formatting-context①">(2)</a> <a href="#ref-for-independent-formatting-context②">(3)</a> <a href="#ref-for-independent-formatting-context③">(4)</a>
    <li><a href="#ref-for-independent-formatting-context④"> Appendix C: Box Construction Guidelines for Spec Authors</a> <a href="#ref-for-independent-formatting-context⑤">(2)</a>
    <li><a href="#ref-for-independent-formatting-context⑥"> Changes Prior to Candidate Recommendation Status</a> <a href="#ref-for-independent-formatting-context⑦">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="establish-an-independent-formatting-context">
   <b><a href="#establish-an-independent-formatting-context">#establish-an-independent-formatting-context</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-establish-an-independent-formatting-context"> Appendix A: Glossary</a> <a href="#ref-for-establish-an-independent-formatting-context①">(2)</a> <a href="#ref-for-establish-an-independent-formatting-context②">(3)</a> <a href="#ref-for-establish-an-independent-formatting-context③">(4)</a> <a href="#ref-for-establish-an-independent-formatting-context④">(5)</a>
    <li><a href="#ref-for-establish-an-independent-formatting-context⑤"> Appendix C: Box Construction Guidelines for Spec Authors</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="block-formatting-context">
   <b><a href="#block-formatting-context">#block-formatting-context</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-block-formatting-context">2. 
Box Layout Modes: the display property</a>
    <li><a href="#ref-for-block-formatting-context①">2.2. 
Inner Display Layout Models: the flow, flow-root, table, flex, grid, and ruby keywords</a> <a href="#ref-for-block-formatting-context②">(2)</a> <a href="#ref-for-block-formatting-context③">(3)</a> <a href="#ref-for-block-formatting-context④">(4)</a> <a href="#ref-for-block-formatting-context⑤">(5)</a>
    <li><a href="#ref-for-block-formatting-context⑥">3. 
Run-In Layout</a>
    <li><a href="#ref-for-block-formatting-context⑦"> Appendix A: Glossary</a> <a href="#ref-for-block-formatting-context⑧">(2)</a> <a href="#ref-for-block-formatting-context⑨">(3)</a> <a href="#ref-for-block-formatting-context①⓪">(4)</a> <a href="#ref-for-block-formatting-context①①">(5)</a> <a href="#ref-for-block-formatting-context①②">(6)</a> <a href="#ref-for-block-formatting-context①③">(7)</a> <a href="#ref-for-block-formatting-context①④">(8)</a> <a href="#ref-for-block-formatting-context①⑤">(9)</a> <a href="#ref-for-block-formatting-context①⑥">(10)</a> <a href="#ref-for-block-formatting-context①⑦">(11)</a> <a href="#ref-for-block-formatting-context①⑧">(12)</a> <a href="#ref-for-block-formatting-context①⑨">(13)</a> <a href="#ref-for-block-formatting-context②⓪">(14)</a> <a href="#ref-for-block-formatting-context②①">(15)</a> <a href="#ref-for-block-formatting-context②②">(16)</a> <a href="#ref-for-block-formatting-context②③">(17)</a>
    <li><a href="#ref-for-block-formatting-context②④"> Changes Prior to Candidate Recommendation Status</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="inline-formatting-context">
   <b><a href="#inline-formatting-context">#inline-formatting-context</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-inline-formatting-context">2.2. 
Inner Display Layout Models: the flow, flow-root, table, flex, grid, and ruby keywords</a>
    <li><a href="#ref-for-inline-formatting-context①"> Appendix A: Glossary</a> <a href="#ref-for-inline-formatting-context②">(2)</a> <a href="#ref-for-inline-formatting-context③">(3)</a> <a href="#ref-for-inline-formatting-context④">(4)</a> <a href="#ref-for-inline-formatting-context⑤">(5)</a> <a href="#ref-for-inline-formatting-context⑥">(6)</a> <a href="#ref-for-inline-formatting-context⑦">(7)</a> <a href="#ref-for-inline-formatting-context⑧">(8)</a>
    <li><a href="#ref-for-inline-formatting-context⑨"> Changes Prior to Candidate Recommendation Status</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="block-formatting-context-root">
   <b><a href="#block-formatting-context-root">#block-formatting-context-root</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-block-formatting-context-root"> Appendix A: Glossary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="bfc">
   <b><a href="#bfc">#bfc</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-bfc">2. 
Box Layout Modes: the display property</a>
    <li><a href="#ref-for-bfc①"> Changes Prior to Candidate Recommendation Status</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="out-of-flow">
   <b><a href="#out-of-flow">#out-of-flow</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-out-of-flow"> Appendix A: Glossary</a> <a href="#ref-for-out-of-flow①">(2)</a> <a href="#ref-for-out-of-flow②">(3)</a> <a href="#ref-for-out-of-flow③">(4)</a> <a href="#ref-for-out-of-flow④">(5)</a>
    <li><a href="#ref-for-out-of-flow⑤"> Changes Prior to Candidate Recommendation Status</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="in-flow">
   <b><a href="#in-flow">#in-flow</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-in-flow"> Appendix A: Glossary</a>
    <li><a href="#ref-for-in-flow①"> Changes Prior to Candidate Recommendation Status</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="absolutely-positioned">
   <b><a href="#absolutely-positioned">#absolutely-positioned</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-absolutely-positioned"> Appendix A: Glossary</a> <a href="#ref-for-absolutely-positioned①">(2)</a>
    <li><a href="#ref-for-absolutely-positioned②"> Changes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="document-order">
   <b><a href="#document-order">#document-order</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-document-order"> Changes Prior to Candidate Recommendation Status</a>
   </ul>
  </aside>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
    var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
    // Find the dfn element or panel, if any, that was clicked on.
    var el = e.target;
    var target;
    var hitALink = false;
    while(el.parentElement) {
        if(el.tagName == "A") {
            // Clicking on a link in a <dfn> shouldn't summon the panel
            hitALink = true;
        }
        if(el.classList.contains("dfn-paneled")) {
            target = "dfn";
            break;
        }
        if(el.classList.contains("dfn-panel")) {
            target = "dfn-panel";
            break;
        }
        el = el.parentElement;
    }
    if(target != "dfn-panel") {
        // Turn off any currently "on" or "activated" panels.
        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
            el.classList.remove("on");
            el.classList.remove("activated");
        });
    }
    if(target == "dfn" && !hitALink) {
        // open the panel
        var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
        if(dfnPanel) {
            dfnPanel.classList.add("on");
            var rect = el.getBoundingClientRect();
            dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
            dfnPanel.style.top = window.scrollY + rect.top + "px";
            var panelRect = dfnPanel.getBoundingClientRect();
            var panelWidth = panelRect.right - panelRect.left;
            if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                // Reposition, because the panel is overflowing
                dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
            }
        } else {
            console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
        }
    } else if(target == "dfn-panel") {
        // Switch it to "activated" state, which pins it.
        el.classList.add("activated");
        el.style.left = null;
        el.style.top = null;
    }

});
</script>